css网格布局之grid

最新推荐文章于 2024-06-20 12:53:56 发布

CCC_go

最新推荐文章于 2024-06-20 12:53:56 发布

阅读量916

点赞数 2

分类专栏： css 文章标签： css 网格布局 grid布局

本文链接：https://blog.csdn.net/yadang2/article/details/81431832

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css网格布局之grid

简介：css网格布局用于将页面分割成数个不主要内容块（子元素），或者用力啊定义组件内部元素间的大小，位置和图层之间的关系。
想表格一样，网格布局让我们能够按行或按列拉力对齐元素，但是，使用css网格鄙css表格更灵活，布局更随心所欲。
绘制网格（如三栏布局）

父级元素定义display属性grid或者inline-grid
grid-template-rows * grid-template-columns
划分的度量单位接受：
具体值（200px）: grid-template-columns: 290px 290px 290px;
百分比（20%）：grid-template-columns： 20% 20% 20%；
计算值（1fr）: grid-template-columns: 1fr 1fr 1fr;
repeat: gird-template-columns: repeat(3, 290px);
给定范围自适应： grid-template-columns: repeat(3, minmax(290px, 1fr));

添加项目间的间隙： grid-gap: 10px 12px;
在这里插入图片描述

单个grid项目合并单元格功能
横向合并：grid-column
纵向合并： grid-row
在这里插入图片描述

html部分

<div class="wrapper"> 
  <div class="box a">A</div>
  <div class="box b">B</div> 
  <div class="box c">C</div> 
  <div class="box d">D</div> 
  <div class="box e">E</div> 
  <div class="box f">F</div> 
  <div class="box g">G</div> 
  <div class="box h">H</div> 
  <div class="box i">I</div> 
  <div class="box j">J</div> 
</div>

css部分

.wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(100px, 1fr));
  grid-gap:30px;
}
.box{
  background: green;
  height:100px;
}
.a {
  grid-column: 1/6;
}

定义结果
在这里插入图片描述