grid布局

最新推荐文章于 2024-10-13 20:52:25 发布

江离厌

最新推荐文章于 2024-10-13 20:52:25 发布

阅读量434

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/shaonaoz/article/details/122550239

版权

CSS Grid布局是目前最强大的二维布局系统，尽管存在兼容性问题，但适合个人项目。开启Grid布局需在父元素设置`display: grid`。内容包括行列划分、fr单位、单元格定位、行列间距以及跨行跨列的设置。此外，`grid-auto-flow`属性影响子元素的自动放置顺序，可实现更灵活的布局。

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

grid布局

grid布局是最强大的布局方式，这点毋庸置疑，但是要看场景使用，很多情况下还有不兼容的状况，但是写一些自己的项目却是不二之选！
当然，学起来的内容也是比较多的！

首先，要开启grid布局，要在父标签加上：display：grid，这就开启了grid布局
然后就是看你要分成几行几列：这就设置成了4行4列，每列200px。每行100px

<div class="wrapper">
  <div class="one item">一</div>
  <div class="two item">二</div>
  <div class="three item">三</div>
  <div class="four item">四</div>
  <div