CSS 网格

最新推荐文章于 2025-07-21 19:56:17 发布
原创 最新推荐文章于 2025-07-21 19:56:17 发布 · 232 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了CSS Grid布局，包括display:grid属性，如grid-template-columns和grid-template-rows定义网格结构，grid-gap简化间距设置，grid-column和grid-row控制单元格位置，justify-self和align-self调整元素在单元格内的对齐，以及justify-items和align-items实现整体对齐，最后讲解了grid-area创建网格区域和repeat函数的使用。

一、display:grid

1、grid-template-columns

grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* 请在本行以下添加你的代码 */
    grid-template-columns:100px 100px 100px;
    /* 请在本行以上添加你的代码 */
  }
</style>
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

2、grid-template-rows

添加多行。

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    /* 请在本行以下添加你的代码 */
    grid-template-rows:50px 50px;
    /* 请在本行以上添加你的代码 */
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

3、grid-column-gap

创建多列之间的间距。

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 请在本行以下添加你的代码 */
    grid-column-gap: 20px;
    /* 请在本行以上添加你的代码 */
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

4、grid-row-gap

创建多行之间的间距

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 请在本行以下添加你的代码 */
    grid-row-gap:5px;
    /* 请在本行以上添加你的代码 */
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

二、grid-gap

更快地添加间距。
grid-gap：第一个值将作为行间隙的高度值，第二个值是列间隙的宽度值。

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 请在本行以下添加你的代码 */
    grid-gap:10px 20px;
    /* 请在本行以上添加你的代码 */
  }
</style>
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

三、grid-column

是第一个用于网格项本身的属性。grid-column属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
grid-column: 1 / 3;网格项从左侧第一条线开始到第三条线结束，占用两列。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
    /* 请在本行以下添加你的代码 */
    grid-column: 2 / 4;
    /* 请在本行以上添加你的代码 */
  }
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<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>

四、grid-row

确定开始和结束的水平线。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
    grid-column: 2 / 4;
    /* 请在本行以下添加你的代码 */
    grid-row:2 / 4;
    /* 请在本行以上添加你的代码 */
  }
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<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>

五、justify-self

水平对齐项目。设置其内容的位置在单元格内沿行轴对齐的方式。

stretch：内容占满整个单元格的宽度。

start：使内容在单元格左侧对齐。

center：使内容在单元格居中对齐。

end：使内容在单元格右侧对齐。

<style>
  .item1{background: LightSkyBlue;}
  
  .item2 {
    background: LightSalmon;
    /* 请在本行以下添加你的代码 */
    justify-self:center;
    /* 请在本行以上添加你的代码 */
  }
  
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<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>

六、align-self

沿列轴对齐方式。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  
  .item3 {
    background: PaleTurquoise;
    /* 请在本行以下添加你的代码 */
    align-self:end;
    /* 请在本行以上添加你的代码 */
  }
  
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<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>

七、 justify-items

水平对齐所有项目

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* 请在本行以下添加你的代码 */
    justify-items:center;
    /* 请在本行以上添加你的代码 */
  }
</style>
  
<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>

八、align-items

垂直对齐所有项目

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* 请在本行以下添加你的代码 */
    align-items:end;
    /* 请在本行以上添加你的代码 */
  }
</style>
  
<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>

九、 grid-area

将项目放置在网格区域中。
如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：
item1 { grid-area: 1/1/2/4; }
grid-area: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线 ;

repeat

减少重复
添加 100 行网格的例子，使每行高度均为 50px：grid-template-rows: repeat(100, 50px);
grid-template-columns: repeat(2, 1fr 50px) 20px;
效果相当于：
grid-template-columns: 1fr 50px 1fr 50px 20px;

css布局grid-template-columns属性
m0_74265396的博客
11-06 1870
将创建一个有三列的网格，其中第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。” 将创建一个有6列的网格，其中每个重复的模式包含1个1fr列和1个2fr列。第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。总之， grid-template-columns 属性是用于定义网格列数量和大小的非常有用的属性，在创建具有复杂布局的网站时非常有用。您还可以将 grid-template-columns 属性设置为 auto，表示列的大小将根据内容自动调整。
《十二》CSS3 Grid 网格布局
花铛
12-09 3079
网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
CSS网格布局笔记[转]
baidu_41388533的博客
05-02 1894
CSS网格布局笔记[转] 参考：CSS Grid教程第1集 - 创建网格容器_哔哩哔哩_bilibili https://codepen.io/brandonzhang https://codepen.io/brandonzhang/pen/MWEYrrJ 查看网格布局线条： 开发者工具独立窗口： 创建网格容器 示例1： 示例2： fr单位和repeat()函数示例1： 示例2 示例3： 网格单元和网格区域 示例1： 示例2： 示例3...
从混乱到有序：CSS `grid-template-columns` 打造精准网格布局
最新发布
探索技术与生活
07-21 2418
本文深入解析CSS Grid中的grid-template-columns属性，展示其如何解决常见的网页布局难题。通过五种单位（固定值、百分比、fr、repeat()和minmax()）的组合，可以实现从简单图片画廊到复杂响应式系统的多样化布局。文章重点演示了5个典型场景：响应式图片画廊（自动适应列数）、电商商品列表（混合固定与弹性列）、后台数据表格（精确列宽控制）、卡片式布局（不等宽列组合）以及响应式导航栏。
阮一峰老师 CSS Grid 网格布局教程(转载)
热门推荐
鸭绒的博客
09-30 3万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
CSS网格
02-25
【CSS网格】是一种强大的网页布局系统，它允许开发者创建二维的、响应式的布局，其中包含行和列，能够轻松地管理网页元素的位置和大小。在HTML网页设计中，CSS网格系统的应用大大简化了复杂的页面布局，提高了开发...
推荐14款非常有用的 CSS 网格系统生成工具
09-25
在网页设计领域，CSS网格系统是至关重要的工具，它能够帮助开发者快速地创建响应式、结构化的布局。本文将详细介绍14款极具实用价值的CSS网格系统生成工具，旨在简化你的设计过程，提升效率。 1. **Tiny Fluid Grid...
精选资源
网页布局：使用CSS网格和Flexbox的网站布局设计
02-15
随着技术的发展，现代网页布局不再局限于传统的表格布局，而是转向了更灵活、更强大的CSS Grid（CSS网格）和Flexbox（弹性盒模型）。这两种布局模式为创建响应式、自适应的网站提供了强大的工具。 首先，让我们深入...
gridkissPostCSS插件让CSS网格变得超级简单
08-08
标题中的"gridkissPostCSS插件"是一个用于简化CSS网格布局的工具，它通过PostCSS这个现代化的CSS处理器来实现。PostCSS是一种允许开发者使用未来CSS语法的工具，它会将这些先进的语法转换为目前浏览器能理解的形式。...
CSS 网格 Gird 布局
qq_43505867的博客
09-21 689
通过将属性display的值设为grid，HTML 元素就可以变为网格容器。在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。
了解 CSS 中的网格模板列
分享身边生活经验blog
09-15 858
简单的说， grid-template-columns是一个属性，如何修复“未找到对话”ChatGPT 错误指定网格布局中的列数以及所述列的宽度。该属性的值由空格分隔，每个值指定其各自列的大小：上面的行是如何使用的基本演示 grid-template-columns。他们三个 auto分隔的值表示具有相同宽度的三列。以下两个也同样适用 auto价值观。如何解决“此帐户不允许使用 WhatsApp”的问题至于四个 20%值时，列的宽度将为父元素的 20%。
CSS - 网格布局（grid）
优快云
07-20 7622
网格布局、grid、表格布局、二维布局、网格轨道、grid-template-rows、grid-template-columns、grid-template、fr单位、min-content、max-content、minmax、auto-fill、auto-fit、网格单元、网格项目、网格线、grid-row、grid-column、grid-area、网格区域、grid-template-area、网格间距、gap、显示网格、隐式网格、稀疏包装、密集包装、网格单元对齐、网格项目对齐、统一对齐、单独对齐
grid-template-columns: repeat(3, 1fr)；到底是干什么的？使用场景是什么？底层原理是什么？
长风破浪会有时的博客
12-03 3064
是 CSS Grid 布局中用于定义等分列的一个简洁而强大的属性。
前端必知必会-CSS 网格项
qq_24018193的博客
09-17 846
本文介绍了CSS 网格项的使用，如有问题欢迎私信和评论。
grid-template-columns: 1.833333rem 1fr；
fury的博客
08-19 429
是一个灵活单位，表示第二列会占据网格容器剩余的空间,表示第一列的宽度是相对于根元素字体大小的固定宽度,第一列是固定宽度, 第二列是自适应剩余容器的宽度.
CSS Gird布局用法
前端-小鑫
08-01 1020
容器属性 grid-template-columns 列 grid-template-rows 行 row-gap 行间距 grid-auto-flow 排列方向 默认row行 排列排版 justify-content 水平 align-content垂直 设置多余的设置大小 grid-auto 容器属性 一个区域由单个或多个组成grid-template-areas 列grid-template-columns grid-temp
css grid 布局 fr 和 % 有区别吗？ （grid-template-column 1fr 1fr 或 50% 50%）
qq_40144303的博客
03-29 1393
答案是有的，但也要看情况 如果你父子级别 宽高 写死 是 肯定没有区别的 <style> .grid-all { width: 600px; height: 150px; } .grid-item { /* width: 100%; */ /* height: 100%; */ width: 150px; height: 150px; } .green { ..
Css布局 Grid布局
qq_54855933的博客
08-01 8488
grid-template-areas 的属性值是一个或多个由空格分隔的字符串，每个字符串代表网格布局中的一行。函数 ：minmax(最小值，最大值) 函数允许你同时设置列（或行）的最小值和最大值。会创建两列，第一列长度为1fr，第二列的宽度至少为 100px，且不超过1fr。Grid布局，即网格布局，通过将容器划分为"行"和"列"来创建网格，然后将内容放置在网格的单元格中，咱们可以简单理解为二维布局。定义了网格线与网格项之间的间隙（grid-row-gap 和 grid-column-gap 的简写）。
bootstrap 设置columns宽度_grid布局笔记2——grid-template-columns、grid-template-rows
weixin_39915820的博客
01-26 3798
我们首先了解一下容器属性，display：grid指定一个容器采用网格布局。这样，后续的容器属性或者项目属性才能够发挥效果，这和flex布局是一样的。display：grid；容器元素是块级元素，采用网格布局，我们也可以使容器为行内元素且采用网格布局——display：line-grid，具体取哪个值我们可以视情况而定。(注意，设为网格布局以后，容器子元素(项目)的float、display：in...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值