DEVHIDE
Login Or Sign up

Midjounrey Gallery Masonry Grid Layout, fix jumping white space

38 Views Asked by At

I'm trying to get a working example for midjourney gallery grid. The closest I have gotten: https://codepen.io/NICK-XoX/pen/bGmNmbL.

html

<!doctype html>
<html lang="en">
    <head>
        <title data-rh="true">XoX</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="grid">
            <div class="item">
              <div class="content">
                    <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
              </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
          



            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>



              <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>




              <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>



              <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>





          </div>

          <script src="function.js"></script>
    </body>
</html><div class="grid">
            <div class="item">
              <div class="content">
                    <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
              </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
            </div>
          



            <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>



              <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>




              <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>



              <div class="item">
                <div class="content">
                      <img class="photothumb" src="https://images.unsplash.com/photo-1678297576263-b1be75fc72e3?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678381138045-014c0fa76e27?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1678488368281-54021d213fc1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679405816922-15529b1d4770?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1679468971189-fda1a22061d6?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680272058543-6f3495d6e9e4?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680122756192-b6d77770ceea?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>
              <div class="item">
                  <div class="content">
                        <img class="photothumb" src="https://images.unsplash.com/photo-1680622343869-89b9be54554a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODEwMDQwMTY&ixlib=rb-4.0.3&q=85">
                  </div>
              </div>





          </div>

css

.grid {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(175px, 100%/5)), 1fr));
    grid-auto-rows: 10px;
}
  
  /* Non-grid specific CSS */  
body {
    margin: 15px;
    color: #374046;
    background-color: #374046;
    -webkit-font-smoothing: antialiased;
  }
.item {
    background-color: #ffffff;
}
.photothumb{
    width: 100%;
}

js

function resizeGridItem(item){
    grid = document.getElementsByClassName("grid")[0];
    rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
    rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
    rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
    item.style.gridRowEnd = "span " + rowSpan;
}
  
function resizeAllGridItems(){
    allItems = document.getElementsByClassName("item");
    for(x=0;x<allItems.length;x++){
        resizeGridItem(allItems[x]);
    }
}
  
function resizeInstance(instance){
    item = instance.elements[0];
    resizeGridItem(item);
}
  
window.onload = resizeAllGridItems();
window.addEventListener("resize", resizeAllGridItems);

Which, on resize, causes the top/bottom margin to jump like crazy. If anyone could fix my existing demo, or link to a working one would be great. Thanks

I have searched and tried for so long, but I can't seem to fix the issue.

html css grid masonry
Original Q&A
0

There are 0 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in GRID

Related Questions in MASONRY

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.