css网格布局案例

猫大喵

于 2023-02-22 18:24:58 发布

阅读量185

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43867303/article/details/129167779

版权

css 同时被 3 个专栏收录

5 篇文章

订阅专栏

css3

5 篇文章

订阅专栏

html

2 篇文章

订阅专栏

文章介绍了两种方法来创建一个多栏布局：1)使用grid-template-areas和grid-template定义网格区域，将左边的大模块和右边的两个小模块垂直排列；2)通过设置单个项目的grid-column和grid-row属性来指定其占据的网格区间。这两种方法都利用了CSSGrid布局系统。

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

实现多栏布局

左边一个大模块，右边两个小模块垂直排列
1，使用grid-template-areas指定网格区域划分

<div class="grid-container">
   <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

.grid-container{
    display: grid;
    grid-auto-flow: column;
    grid-template: "a . ." 1fr "a . ." 1fr / 1fr 1fr 1fr;
    grid-gap: 6px;
    margin-bottom: 20px;
}

.grid-container .item{
    width: 100%;
    height: 100%;
    background-color: deepskyblue;
}

.grid-container .item:first-child{
    grid-area: a;
}

2，单个项目设置区间范围属性

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

.container{
    display: grid;
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
    grid-gap: 10px;
}

.container .item{
    width: 100%;
    height: 100%;
    background-color: #2a80eb;
}

.container .item:first-child{
    background-color: #ef342a;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}