CSS布局--grid布局

最新推荐文章于 2025-06-25 18:32:01 发布

eat老虎滴兔兔

最新推荐文章于 2025-06-25 18:32:01 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.csdn.net/clhdtzhh/article/details/123227118

本文详细介绍了CSS Grid布局的各个方面，包括grid-template-columns、grid-template-rows、grid-auto-rows、grid-column和grid-row的用法。通过实例展示了如何设置栅格宽度、高度以及元素在网格中的位置。还提到了使用grid-template-areas简化布局，并通过调整元素的grid-area属性来定义其在网格中的位置。内容涵盖了固定宽度、比例分配、自动填充等不同场景的栅格布局策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、栅格布局：

grid-template-columns：用于指定多少列，如果是实际值比如100px，那栅格每列宽度就是100px,元素就算设置了宽度，不会去自适应栅格，元素小了就有空隙，元素大了就相互重叠，但是，如果值不是具体值，比如 1fr 那就是按比例占宽度，如果元素总宽小于盒子，那栅格宽度就均分盒子，如果元素总宽大于盒子，每个栅格宽度为盒子宽度，fr就是用于，不设栅格元素宽度时，去分配，所以设定了宽度，又设定比例，按照宽度优先。有多少行好像完全是根据，总元素数和列数确定，重点就是盒子不自适应栅格

（1）每个栅格宽度为100px：grid-template-columns: 100px 100px 100px;

第一点：栅格容器宽度比 300大还是小都无所谓（就好像栅格是罩在容器上的一层网，不会撑开容器或者使容器缩小）

第二点：栅格元素的宽度如果小于100px 元素左边拜访，如果大于100，栅格大小不会变！不会撑开！元素直接相互覆盖

（2）栅格占比：grid-template-columns: 1fr 1fr 1fr; （或者用repeat(3,1fr)）

第一点：三列在父容器里宽度占比为 1 : 1 : 1，元素宽度如果小了，就填在依据栅格容器分好的三列里就好，元素如果打了，会撑开栅格的！！！（所以涉及到撑开的情况，只有这一种，就是使用单位fr且元素宽度大于栅格宽度的时候！！）

（3）grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

第一点：自动填充，就是用你设定的最小宽度去算总宽能容纳下几个，比容能容下三个还有空隙，就拉长栅格宽度且栅格元素填满栅格，如果三个容不下，那就是两个，多了空隙就拉长，

（4）栅格高度：grid-auto-rows: 100px;

第一点：和宽度一样的道理总的来说就是栅格不撑开栅格容器栅格元素一般不撑开栅格除非上面讲的那种情况。如果全能容下呢？还不用换行，那就按照总宽能容下几个去均分栅格，注意！是均分栅格，也就是说我只有三个栅格元素，但是整行能容下4个100px的栅格，那就还是分四格，但只有前三个栅格有元素最后一个空着

第二点：值如果为 minmax（100px, auto）如果内容多会撑开高度

（5）grid-column: 1 / 4; grid-row: 1;

第一点：这个是缩写用于指定填充哪些栅格高度最好做自适应也就是grid-auto-rows：minmax（100px, auto），注意！！1 / 4 斜杠两边是由空格的！！！

（6）一个布局示例：

代码：

HTML

<div class="main">
        <header>
            <p>this is my lovely blog</p>
        </header>
        <aside>
            <h2>Other things</h2>
            <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est,
                posuere sit amet dapibus ut, facilisis sed est.</p>
        </aside>
        <article>
            <h2>My article</h2>
            <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
                convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin
                eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo
                et a urna. Ut id ornare felis, eget fermentum sapien.
                Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis
                est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget
                aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed
                lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget
                purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>
        </article>
        <footer>Contact me@mysite.com</footer>
    </div>

CSS

<style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .main {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(80px, auto);
            grid-template-rows: 3;
            width: 800px;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid red;
        }

        header {
            /* border: 1px red solid; */
            border-radius: 10px;
            background-color: pink;
            grid-column: 1 / 4;
            grid-row: 1;
        }

        aside {
            border-radius: 10px;
            background-color: yellow;
            grid-column: 1;
            grid-row: 2;
        }

        article {
            border-radius: 10px;
            background-color: orange;
            grid-column: 2 / 4;
            grid-row: 2;
        }

        footer {
            border-radius: 10px;
            background-color: pink;
            grid-column: 1 / 4;
            grid-row: 3;
        }

（7）上面示例用 grid-area填充方式实现

grid-template-areas:
"header header header"
"aside article article"
"footer footer footer";

用上面这个规定填充模板

然后再各元素中声明 grid-area:header 声明一个名字

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .main {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(80px, auto);

            grid-template-areas:
                "header header header"
                "aside article article"
                "footer footer footer";
            width: 800px;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid red;
        }

        header {
            grid-area: header;
        }

        aside {
            grid-area: aside;
        }

        article {
            grid-area: article;
        }
        footer {
            grid-area: footer;
        }
    </style>