如何在调整大小时保持CSS网格布局相同

时间：2019-01-27 16:36:17

标签： html css responsive-design css-grid

我之前也曾问过类似的问题，但不幸的是，我仍然对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;
}

2 个答案:

答案 0 :(得分：3)

这是由于使用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更改为取决于宽度。而且我删除了px顶部填充，因为它倾向于以较小的宽度破坏布局。

答案 1 :(得分：1)

关键可能是 grid-template-columns：repeat（3，1fr）;

此答案对我有帮助：Can I emulate CSS grids with dynamic number of cells/rows in JavaScript?

相关问题
最新问题