Как сохранить размер сетки CSS при изменении размера

Question

Я уже задавал подобный вопрос раньше, но, к сожалению, у меня все еще есть проблема с сеткой CSS:

Я пытаюсь сохранить макет мозаики сетки CSS при изменении размера.

Пример :

На этом сайте (https://airtifact.heythemers.com/) макет не изменяется при изменении размера.Ширина и высота относительно друг друга как есть, и затем это разрывается с медиа-запросами.

В моем коде ширина изображений не изменяется вместе с их высотой, поэтому при изменении размера высота остаетсятот же самый.Я хочу, чтобы он сохранял соотношение сторон, как в примере выше.

HTML

<main>
    <div class="grid">
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Bori Bianka Jewelry</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 1 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Upton</h1>
                        <p>Branding, Creative Direction, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 2 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Nike / Ganar te la Pela</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 3 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Guajira</h1>
                        <p>Art Direction, Branding, Graphic Design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 4 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>La Cocinería</h1>
                        <p>Branding, Architecture</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 5 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>NIKE 4D Executive Offices</h1>
                        <p>Digital Art, Drawing, Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 6 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Cta18</h1>
                        <p>Branding, Art Direction, Motion Graphics</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 7 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Foodiest</h1>
                        <p>Branding</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 8 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Fabulous</h1>
                        <p>Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 9 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Zertouche</h1>
                        <p>Art Direction, Branding, Print design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 10 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Sweet Dough </h1>
                        <p>Art Direction, Branding, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 11 ends -->
    </div>
</main>

CSS

figure {
    width: 100%;
    height: 100%;
    margin: 0;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main {
  width: 90vw;
  margin: 0 auto;
}
.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 30vh;
    grid-column-gap: 3vw;
    grid-row-gap: 30vh;
}
.grid article:first-of-type {
    grid-column: 1/4;
    grid-row: 1 / 3;
}
.grid article:nth-child(2) {
    grid-column: 4/6;
    grid-row: 1 / 2;
}
.grid article:nth-child(3) {
    grid-column: 1/4;
}
.grid article:nth-child(4) {
    grid-column: 4/6;
}
.grid article:nth-child(5) {
    grid-column: 1/3;
}
.grid article:nth-child(6) {
    grid-column: 3/6;
    grid-row: 4/6;
}
.grid article:nth-child(7) {
    grid-column: 1/3;
    grid-row: 6/7;
}
.grid article:nth-child(8) {
    grid-column: 3/5;
    grid-row: 6/7;
}
.grid article:nth-child(9) {
    grid-column: 5/6;
    grid-row: 6/7;
}
.grid article:nth-child(10) {
    grid-column: 1/4;
    grid-row: 7/9;
}
.grid article:nth-child(11) {
    grid-column: 4/6;
    grid-row: 7/8;
}
.grid article a {
    text-decoration: none;
    color: #474747;
}
.grid article h1 {
    font-size: 2.2rem;
    letter-spacing: 0.3rem;
    font-weight: lighter;
}
.grid article p {
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.grid figcaption {
    padding: 50px 0;
}

Answer 1

Это вызвано использованием vw в качестве единицы измерения размера вашей сетки.Это означает, что при изменении высоты экрана устройства изменяется сетка.

Чтобы сохранить соотношение ч / б для элемента HTML, вы можете использовать процентиль bottom-padding, поскольку он разработан специально для этой цели и представляет собой процент отширина элемента, а не его высота.

Таким образом, вы можете задать <main> конкретное соотношение, используя: padding-bottom: 45% (приблизительно).

Теперь, чтобы изменить размер вашей сетки в соответствии сразмер <main> вам нужно будет расположить его absolute:

main {
  position: relative;
  padding-bottom: 45%;
}
.grid {
  position: absolute;
  top: 0;
  bottom: 0;
  /* also change the `vh` to `%` */
  grid-auto-rows: 30%;
  grid-column-gap: 3%;
  grid-row-gap: 30%;
}

Рабочий пример:

figure {
    width: 100%;
    height: 100%;
    margin: 0;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main {
  width: 90vw;
  margin: 0 auto;
  position: relative;
  padding-bottom: 42%;
}
.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 30%;
    grid-column-gap: 3%;
    grid-row-gap: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
}
.grid article:first-of-type {
    grid-column: 1/4;
    grid-row: 1 / 3;
}
.grid article:nth-child(2) {
    grid-column: 4/6;
    grid-row: 1 / 2;
}
.grid article:nth-child(3) {
    grid-column: 1/4;
}
.grid article:nth-child(4) {
    grid-column: 4/6;
}
.grid article:nth-child(5) {
    grid-column: 1/3;
}
.grid article:nth-child(6) {
    grid-column: 3/6;
    grid-row: 4/6;
}
.grid article:nth-child(7) {
    grid-column: 1/3;
    grid-row: 6/7;
}
.grid article:nth-child(8) {
    grid-column: 3/5;
    grid-row: 6/7;
}
.grid article:nth-child(9) {
    grid-column: 5/6;
    grid-row: 6/7;
}
.grid article:nth-child(10) {
    grid-column: 1/4;
    grid-row: 7/9;
}
.grid article:nth-child(11) {
    grid-column: 4/6;
    grid-row: 7/8;
}
.grid article a {
    text-decoration: none;
    color: #474747;
}
.grid article h1 {
    font-size: 3.2vw;
    letter-spacing: 0.3vw;
    font-weight: lighter;
}
.grid article p {
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.grid figcaption {
    padding: 0;
}

<main>
    <div class="grid">
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Bori Bianka Jewelry</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 1 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Upton</h1>
                        <p>Branding, Creative Direction, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 2 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Nike / Ganar te la Pela</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 3 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Guajira</h1>
                        <p>Art Direction, Branding, Graphic Design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 4 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>La Cocinería</h1>
                        <p>Branding, Architecture</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 5 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>NIKE 4D Executive Offices</h1>
                        <p>Digital Art, Drawing, Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 6 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Cta18</h1>
                        <p>Branding, Art Direction, Motion Graphics</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 7 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Foodiest</h1>
                        <p>Branding</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 8 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Fabulous</h1>
                        <p>Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 9 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Zertouche</h1>
                        <p>Art Direction, Branding, Print design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 10 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Sweet Dough </h1>
                        <p>Art Direction, Branding, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 11 ends -->
    </div>
</main>

Примечание. Я также изменил font-size ваших h1 s, чтобы они зависели от ширины.И я удалил верхний отступ px, так как он имел тенденцию нарушать макет при меньшей ширине.