CSS网格布局 - 技术栈

CSS 网格布局(CSS Grid)是 CSS 中的一种二维布局系统,可以非常方便地进行网页布局。网格布局的工作原理是将页面划分成一个个网格,然后规定内容放在哪个网格中,从而实现复杂的布局结构。

基本用法

使用网格布局主要分为以下几个步骤:

定义容器:

css 复制代码

.container {
  display: grid; 
}

设置列和行:

css 复制代码

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

定义子元素放在哪个网格区域:

css 复制代码

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1; 
  grid-row-end: 2;
}

css网格属性

这里只列举几个　更多可以参考：CSS 网格布局 | 菜鸟教程

grid-template-columns/grid-template-rows: 定义列和行
grid-column-gap/grid-row-gap: 设置列间距和行间距

eg. 创建一个网格容器，容器中创建4个列，列间距为10px,行间距为20px

代码：
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #grid-container {
        width: 800px;
        height: 500px;
        border: 2px solid pink;

        display: grid;/*创建一个网格容器*/
        grid-template-columns: auto auto auto auto; /*网格容器中创建四个列*/
        grid-column-gap:10px;  /*列间距*/
        grid-row-gap: 20px; /*行间距*/
    }
    #grid-container >div{
        height: 200px;
        background-color: skyblue;
    }
</style>
<body>
    <div id="grid-container">
    </div>
</body>
<script>
    const gridContainer = document.getElementById('grid-container')  
    for(let i=0;i<7;i++){
        const item = document.createElement('div');
        gridContainer.appendChild(item)
    }
</script>
</html>
grid-auto-flow: 设置内容自动放置流向
语法：grid-auto-flow: row | column | row dense | column dense;
默认值是row,即"先行后列"的顺序放置元素。
eg:　这时元素会先放置在第一列,当第一列放不下时再流转到第二列。
css 复制代码
#grid-container {
        width: 800px;
        height: 500px;
        border: 2px solid pink;

        display: grid;/*创建一个网格容器*/
        grid-template-columns: auto auto auto auto; /*网格容器中创建四个列*/
        grid-column-gap:10px;  /*列间距*/
        grid-row-gap: 20px; /*行间距*/
        grid-auto-flow: column;/* 设置流向为列 */
    }
row dense和column dense会尽可能紧密填充,尽量占满网格。所以grid-auto-flow属性可以用来控制浏览器自动布局时的内容流向,非常有用。常见的设置有:

row - 先行后列(默认)

column - 先列后行

row dense - 先行后列,并尽量占满网格

column dense - 先列后行,并尽量占满网格掌握该属性可以更好地控制网格中内容的放置顺序
justify-items/align-items: 设置内容项在单元格内的排列方式

justify-items 和 align-items 属性可以控制网格中的内容项在其网格单元格内的对齐方式。justify-items 属性设置内容项在网格单元格内的水平对齐方式,语法如下:
css 复制代码
justify-items: start | end | center | stretch;
例如`justify-items: center;` 表示将内容项水平居中对齐。align-items 属性设置内容项在网格单元格内的垂直对齐方式,语法如下:
css 复制代码
align-items: start | end | center | stretch;
例如 align-items: end; 表示内容项垂直向下对齐。默认值都是stretch,即内容项会拉伸填满单元格。示例:
css 复制代码
.container {
  justify-items: center;
  align-items: end;
} 
这会使所有内容项水平居中、垂直朝下对齐。
grid-auto-columns 和 grid-auto-rows 属性可以设置浏览器自动创建的列和行的大小。当网格中的元素多于单元格时,浏览器会自动生成新的行和列。我们可以通过这两个属性来设置自动生成行/列的大小。语法如下:
css 复制代码
.container {
  grid-auto-columns: 100px; 
  grid-auto-rows: 50px;
}
这将自动生成的列宽设置为100px,行高设置为50px。也可以设置为百分比或其他单位。如果不指定,浏览器完全根据内容自动设定大小。这样可以实现以下效果:- 控制额外网格的行高和列宽

实现网格中所有行高列宽均匀一致示例:
css 复制代码
.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);

  grid-auto-columns: 100px; 
  grid-auto-rows: 50px; 
}
上面代码会使自动生成的行和列的大小与指定网格一致。这两个属性给网格布局提供了更大的灵活性和可控性。（已编辑）

使用网格布局实现瀑布流

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #grid-container {
        width: 800px;
        height: 500px;
        border: 2px solid pink;
        column-count: 3;  /*定义容器有2列*/
        column-gap: 10px; /*定义列与列之间的间隙为10px*/
    }
    .item{
        display: grid; /*创建一个容器*/
        grid-template-rows: 1fr auto; /*设置 grid 容器的行高模板(row tracks template)为: 第一行的高度为 1fr (fraction 等分) 第二行的高度为 auto*/
        margin-bottom: 10px; 
        height: 10em; 
    }
    .item:nth-child(2n) {
         height: 12em; 
        } 
    .item:nth-child(3n) { 
        height: 14em; 
    } 
    .item:nth-child(4n) { 
        height: 16em; 
    }
    .item:nth-child(5n) { 
        height: 18em; 
    }
    .item:nth-child(6n) { 
        height: 20em; 
    } 
    .item:nth-child(7n) { 
        height: 22em; 
    } 
    .item:nth-child(8n) { 
        height: 24em; 
    }
</style>
<body>
    <div id="grid-container">
    </div>
</body>
<script>
    const gridContainer = document.getElementById('grid-container')  
    for(let i=0;i<7;i++){
        const item = document.createElement('div');
        const textNode = document.createTextNode(`${i}`)
        item.appendChild(textNode)
        item.classList.add("item"); 
        item.style.backgroundImage = `url(https://picsum.photos/800/600?random=${i})`
        gridContainer.appendChild(item)

    }
</script>
</html>

效果图：