grid布局基本概念整理

最新推荐文章于 2024-06-09 17:30:00 发布

天府第5街①号切图仔

最新推荐文章于 2024-06-09 17:30:00 发布

阅读量730

点赞数

文章标签： css html

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/hemyWeb/article/details/107788016

版权

本文详细介绍了CSS Grid布局，包括display: grid属性的使用，单元格的概念，网格线的设置，以及内容在单元格中的定位方式。通过实例代码展示了如何创建网格、调整行和列的大小，以及使用fr单位实现灵活布局。文章最后提到了Grid布局的浏览器兼容性问题。

摘要由CSDN通过智能技术生成

回顾一下web页面布局的历程，于我个人而言，经历了最开始的学习计算机编程时的table布局和基础的div+css布局，再到后来的flex弹性盒布局。div+css布局给web页面布局带来了更多可能，解决了table布局的局限性。页面是以代码的自上而下的文档流的形式呈现的，所以div+css的浮动解决了横向布局的问题。再后来css3提供了flex布局的特性，让横向布局特别是移动端布局变得更加容易。
本文主要来说说与flex布局类似的grid布局。flex给我们带来了“轴线”的概念，相当于是“一维”的，而grid布局则是将容器分成了“行”和“列”，可以说是“二维”的。
老规矩，只说干货，开整。
首先，我们的基本结构如下：

* {
   
 margin: 0;
  padding: 0;
  list-style: none;
}
.container {
   
  width: 700px;
  height: 700px;
  background-color: #efefef;
  margin: 20px auto;
  display: grid;
}
.item {
   
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  font-weight: 500;
  text-align: center;
}
.item:nth-child(2n) {
   
  background-color: pink