CSS网格布局

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

基本用法

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

1. 定义容器:


.container {
  display: grid; 
}

2. 设置列和行:


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

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


.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>
<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>Documenttitle>
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:　这时元素会先放置在第一列,当第一列放不下时再流转到第二列。
#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 属性设置内容项在网格单元格内的水平对齐方式,语法如下:
justify-items: start | end | center | stretch;
例如`justify-items: center;` 表示将内容项水平居中对齐。align-items 属性设置内容项在网格单元格内的垂直对齐方式,语法如下:
align-items: start | end | center | stretch;
例如 align-items: end; 表示内容项垂直向下对齐。默认值都是stretch,即内容项会拉伸填满单元格。示例:
.container {
  justify-items: center;
  align-items: end;
} 
这会使所有内容项水平居中、垂直朝下对齐。　
grid-auto-columns 和 grid-auto-rows 属性可以设置浏览器自动创建的列和行的大小。当网格中的元素多于单元格时,浏览器会自动生成新的行和列。我们可以通过这两个属性来设置自动生成行/列的大小。语法如下:
.container {
  grid-auto-columns: 100px; 
  grid-auto-rows: 50px;
}
这将自动生成的列宽设置为100px,行高设置为50px。也可以设置为百分比或其他单位。如果不指定,浏览器完全根据内容自动设定大小。这样可以实现以下效果:- 控制额外网格的行高和列宽
实现网格中所有行高列宽均匀一致示例:
.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
 
  grid-auto-columns: 100px; 
  grid-auto-rows: 50px; 
}
上面代码会使自动生成的行和列的大小与指定网格一致。这两个属性给网格布局提供了更大的灵活性和可控性。（已编辑）

使用网格布局实现瀑布流


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>Documenttitle>
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>

效果图：

相关阅读:
Jenkins的jdk和maven配置
 C 风格文件输入/输出（std::fflush）（std::fwide）（std::setbuf）（std::setvbuf）
one-model引擎：私域营销推荐自动化解决方案【转载】
金蝶云星空——单据附件上传
 快速解决“找不到msvcr120.dll无法执行代码”问题，总结5解决方法
 合宙ESP32C3 更换Flash调整固件教程分享
 C++指针解读（6）-- 指针和字符串
 NASA授予下一代航天计算处理器合同，中国情况如何？
k8s内网通信时如何配置NAT
抗疫众志成城网页设计成品抗击疫情感动人物网页制作模板大学生抗疫静态HTML网页源码 dreamweaver网页作业致敬逆行者网页设计作品
原文地址：https://blog.csdn.net/T3165919332/article/details/132718752