容器属性

display:grid

    <div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    </div>

    .wrapper {
    display: grid;
    }

效果图：
在这里插入图片描述

2行3列

grid-template-columns 列宽
grid-template-rows 行高
grid-template-columns :1fr 1fr 1fr ; 三等分

    .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
    }

在这里插入图片描述

3*3布局

    <div class="wrapper">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    </div>

    .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    }

在这里插入图片描述

调整item大小

要定位和调整 items(子元素) 大小，我们将使用 grid-column 和 grid-row 属性来设置：

.item1 {
grid-column-start: 1;
grid-column-end: 4;
}

.item1 {
grid-column: 1 / 4;
}

我们在这里要做的是，我们希望 item1 占据从第一条网格线开始，到第四条网格线结束。换句话说，它将独立占据整行。以下是在屏幕上显示的内容：在这里插入图片描述

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}

在这里插入图片描述

grid-template-areas

通过引用 grid-area 属性指定的网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。

<div class="container">
   <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item-c"></div>
    <div class="item-d"></div>
</div>
    
    .item-a{
      grid-area: header;
      background: rgb(36, 195, 235);
    }       
    .item-b{
      grid-area: main;
      background: yellow;
    }       
    .item-c{
      grid-area: sidebar;
      background: chartreuse;
    }       
    .item-d{           
      grid-area: footer;        
      background: green;     
    }   
    .container{         
      width: 500px;     
      height:180px;          
      display:grid;        
      grid-template-columns: 1fr 1fr 1fr 1fr;        
      grid-template-rows: 50px 60px 70px;        
      grid-template-areas: "header header header header"
                            "main main . sidebar"
                            "footer footer footer footer";  
      }

在这里插入图片描述

grid-column-gap / grid-row-gap

指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

.container{              
      display:grid;        
      grid-template-columns: 50px 50px 50px;        
      grid-template-rows: 50px 60px 70px;        
      grid-column-gap: 10px;
      grid-row-gap: 15px; 
      }
      
    <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>
   </div>

grid-column-gap: 10px;
grid-row-gap: 15px;
或者
grid-gap: 10px 15px;
在这里插入图片描述

justify-items(水平方向) align-items(垂直方向)

沿着行轴线(row axis) 对齐网格项(grid items) 内的内容（相反的属性是 align-items 沿着列轴线对齐）。该值适用于容器内的所有网格项。
值：

start：将内容对齐到网格区域(grid area)的左侧
end：将内容对齐到网格区域的右侧
center：将内容对齐到网格区域的中间（水平居中）
stretch：填满网格区域宽度（默认值）
这些行为也可以通过单独网格项(grid items) 的 justify-self 属性设置。

justify-items: center;

在这里插入图片描述

align-items:center;

在这里插入图片描述

    justify-items: center;
    align-items: center;

在这里插入图片描述

justify-content(水平) align-content(垂直)

有时，你的网格合计大小可能小于其网格容器(grid container) 大小。如果你的所有网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，在这种情况下，您可以设置网格容器内的网格的对齐方式。此属性沿着行轴线(row axis) 对齐网格（相反的属性是 align-content ，沿着列轴线对齐网格）。
值：

start：将网格对齐到网格容器(grid container) 的左边
end：将网格对齐到网格容器的右边
center：将网格对齐到网格容器的中间（水平居中）
stretch：调整网格项(grid items) 的宽度，允许该网格填充满整个网格容器的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

grid-auto-columns / grid-auto-rows

指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。在你明确定位的行或列（通过 grid-template-rows / grid-template-columns），超出定义的网格范围时，隐式网格轨道被创建了。

.container {
        display:grid;
      grid-template-columns: 60px 60px;
      grid-template-rows: 90px 90px;
    }
    .item-a{
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      background-color: red;
    }
    .item-b {
      grid-column: 5 / 6;
      grid-row: 2 / 3;
      background-color: yellow;
    }
    
    <div class="container">
        <div class="item-a">a</div>
        <div class="item-b">b</div>
    </div>

在这里插入图片描述

 grid-auto-columns: 100px;

在这里插入图片描述

grid-auto-flow

如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法会自动放置这些网格项。该属性控制自动布局算法如何工作。
值：

row：告诉自动布局算法依次填充每行，根据需要添加新行
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺

请注意，dense 集可能导致你的网格项出现乱序。

.container {
      display: grid;
      grid-template-columns: 60px 60px 60px 60px 60px;
      grid-template-rows: 30px 30px;
    }
    .item-a {
      grid-column: 1;
      grid-row: 1 / 3;
      background-color: red;
    }
    .item-e {
      grid-column: 5;
      grid-row: 1 / 3;
      background-color: yellow;
    }
    .item-b{
        background-color: green;
    }
    .item-c{
        background-color: blue;
    }
    .item-d{
        background-color: pink;
    }
    
    <section class="container">
        <div class="item-a">item-a</div>
        <div class="item-b">item-b</div>
        <div class="item-c">item-c</div>
        <div class="item-d">item-d</div>
        <div class="item-e">item-e</div>
    </section>

默认样式为 grid-auto-flow: row;
在这里插入图片描述

grid-auto-flow: column;

在这里插入图片描述

网格属性

grid-column-start / grid-column-end / grid-row-start / grid-row-end

grid-column / grid-row

grid-area

justify-self(水平) /align-self(垂直)

沿着行轴线(row axis) 对齐网格项内的内容（相反的属性是 align-self ，沿着列轴线(column axis)对齐）。此值适用于单个网格项内的内容。

值：

start：将内容对齐到网格区域的左侧
end：将内容对齐到网格区域的右侧
center：将内容对齐到网格区域的中间
stretch：填充整个网格区域的宽度

应用

1

在这里插入图片描述

    .container {
       display: grid;    
       grid-template-columns: repeat(12, 1fr);
       grid-template-rows: 50px 350px 50px;
       grid-gap: 5px;
       grid-template-areas:
           "h h h h h h h h h h h h"
           "m m c c c c c c c c c c"
           "f f f f f f f f f f f f";
   }
   .header {
   grid-area: h;
   background-color: #BBF1BB;
   }
   .menu {
   grid-area: m;
   background-color: #FDE886;
   }
   .content {
   grid-area: c;
   background-color: #8AFCF9;
   }
   .footer {
   grid-area: f;
   background-color: #DFB8F8;
   }
   
   <div class="container">
       <div class="header">HEADER</div>
       <div class="menu">MENU</div>
       <div class="content">CONTENT</div>
       <div class="footer">FOOTER</div>
   </div>

2

在这里插入图片描述

grid-template-areas:
           ". h h h h h h h h h h ."
           "m m c c c c c c c c c c"
           ". f f f f f f f f f f .";

响应式

在这里插入图片描述

.container {
       display: grid;    
       grid-template-columns: repeat(12, 1fr);
       grid-template-rows: 50px 350px 50px;
       grid-gap: 5px;
       grid-template-areas:
           "h h h h h h h h h h h h"
           "m m c c c c c c c c c c"
           "f f f f f f f f f f f f";
   }
   @media screen and (max-width: 640px) {
       .container {
       grid-template-areas:
       "m m m m m m h h h h h h"
       "c c c c c c c c c c c c"
       "f f f f f f f f f f f f";
       }
   }

参考链接：
5分钟学会 CSS Grid 布局
 CSS Grid 布局完全指南(图解 Grid 详细教程)
如何使用 CSS Grid 快速而又灵活的布局

grid 布局

文章目录

容器属性

display:grid

2行3列

3*3布局

调整item大小

grid-template-areas

grid-column-gap / grid-row-gap

justify-items(水平方向) align-items(垂直方向)

justify-content(水平) align-content(垂直)

grid-auto-columns / grid-auto-rows

grid-auto-flow

网格属性

grid-column-start / grid-column-end / grid-row-start / grid-row-end

grid-column / grid-row

grid-area

justify-self(水平) /align-self(垂直)

应用

1

2

响应式

猜你喜欢