grid布局
说明：使用html+css实现如下图所示，左侧item’100px，右侧占剩余空间，不知道有多少项item，所有间隙部分均为10px
实现代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>grid布局</title><style>body{margin: 0;padding: 0;}.container{display: grid;padding: 10px;/* 实现外层盒子与内部item之间四周的间隙 */background: #000;grid-template-columns: 100px auto;/* 定义两列，第一列为100px，第二列为剩余空间 */grid-template-rows: 100px;/* 定义所有行的高度为100px */grid-gap: 10px;/* 设置网格项之间的间隙，可以根据需要调整 */}.item{background-color: #f0f0f0;/* 给item设置背景颜色，便于观察 */text-align: center;line-height: 100px;}</style></head><body><divclass="container"><divclass="item">Item 1</div><divclass="item">Item 2</div><divclass="item">Item 1</div><divclass="item">Item 2</div><divclass="item">Item 1</div><divclass="item">Item 2</div><divclass="item">Item 1</div><divclass="item">Item 2</div><!-- 可以继续添加更多的item --></div></body></html>
实现效果:
关于grid布局的基本使用
应用在容器上的属性（如上的container）
<style>
设置为网格容易
display：grid;
设置每一列的列宽和一共有多少列
上面的笔试题中两个值，为两列，可以使用px值，auto，fr等
这里三个auto，则为三列
grid-template-columns:auto auto auto;
设置每行的行高，可一个值，也可以每一行一个值
grid-template-rows:100px 200px 300px;
设置行间距和列间距
值行列间剧都是10
值先行后列
grid-gap:10px 20px;grid-gap:10px;
设置行间距
row-gap:30px;
设置列间距
column-gap:20px;</style>
应用在子项目(如item)的属性
类似合并单元格，grid item
- 关于合并的属性介绍
grid-column: 1 / span 2;
grid-column: 1 / 3;
上述两种语法是同等效果
为两种不同的语法，有span关键字的时候是第1列和第2列，没有span关键字的占（
如上图
）第一条线到第3条线中间的区域，也就是第一列和第二列，主要看个人理解
举例实现代码如下：
<!DOCTYPEhtml><html><head><style>.grid-container{display: grid;/* 行列间距都为10px */gap: 10px;background-color: #2196F3;padding: 10px;}.grid-item{background-color:rgba(255, 255, 255, 0.8);text-align: center;padding: 20px;font-size: 30px;}.item1{grid-column: 1 / span 2;grid-row: 1;}.item2{grid-column: 3;grid-row: 1 / 3;}.item5{grid-column: 1 / 4;grid-row: 3;}</style></head><body><divclass="grid-container"><divclass="grid-item item1">1</div><divclass="grid-item item2">2</div><divclass="grid-item item3">3</div><divclass="grid-item item4">4</div><divclass="grid-item item5">5</div></div></body></html>
实现效果如下
注意：基本功能已在上述展示，更多属性查看网址https://www.w3schools.com/css/css_grid_container.asp
标签：
前端
本文转载自: https://blog.csdn.net/weixin_53649241/article/details/140438817
版权归原作者 '猫头'工作室 所有， 如有侵权，请联系我们删除。
版权归原作者 '猫头'工作室 所有， 如有侵权，请联系我们删除。