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

问题描述 投票：0回答：2

我之前问过类似的问题，但不幸的是我仍然遇到 css grid 的问题：

我试图在调整大小时保持 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;
}
html css responsive-design css-grid
2个回答
2
投票

这是由于使用 

vw
作为调整网格大小的单位造成的。这意味着当设备屏幕高度改变时，网格也会改变。

要保持 HTML 元素的高宽比，您可以使用百分位数 

padding-bottom
，因为它是专门为此目的而设计的，并且它是元素宽度的百分比，而不是高度的百分比。

因此，您可以使用以下方法给 

<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
投票

关键可能是 网格模板列：重复(3, 1fr);

这个答案帮助了我：我可以用 JavaScript 中的动态单元格/行数来模拟 CSS 网格吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.