grid布局学习案例
程序员文章站
2022-04-30 09:42:58
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
width:100%;
background: #f3f3f3;
text-align: center;
display: grid;
/*grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(auto-fill, 100px)*/
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 150px 150px 150px;
grid-row-gap: 10px;
grid-column-gap: 10px;
/*grid-auto-flow:column;*/
/*justify-items:center;
align-items:center;*/
justify-content:center;
align-content:center;
}
.item {
text-align: center;
border: 1px solid #fff;
color: #fff;
font-weight: bold;
/*height: 50px;*/
}
.item:nth-of-type(4){
/*grid-column-start: 1;
grid-column-end: 3;
grid-row-start:2;
grid-row-end:4;*/
/*grid-column-start: span 2;
grid-row-start:span 2;*/
grid-column:1 / 3;
grid-row:2 / 4;
}
.item:nth-of-type(2n+1) {
background: #ef342a
}
.item:nth-of-type(2n) {
background: #00a0a0;
}
</style>
</head>
<body>
<h6>
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。<br/>
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。<br/>
Grid 布局远比 Flex 布局强大。
</h6>
<ul>
<h4>容器属性</h4>
<li>
<ol>
<li>display:grid指定一个容器为网格布局</li>
<li>display：inline-grid指定一个窗口为行内容器</li>
</ol>
</li>
<hr />
<li>
<ol>
<li>grid-template-columns：用来指定行的宽度</li>
<li>grid-template-rows：用来指定行的高度</li>
</ol>
</li>
<hr />
<li>
<ol>
<li>grid-row-gap：设置行与行之间的间隔</li>
<li>grid-colunm-gap：设置列于列之间的间隔</li>
<li>grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap</li>
</ol>
</li>
<hr />
<li>
grid-auto-flow,划分网格，容器的子元素默认排序是按照“先行后列”来排的，
可通过该属性我们可以自定义排列的顺序为“先列后行”
</li>
<hr />
<li>
<ol>
<li>justify-items属性设置单元格内容的水平位置，</li>
<li>align-items设置单元格内容的垂直位置</li>
<li>place-item是两者的合并写法</li>
</ol>
</li>
<hr />
<li>
<ol>
<li>justify-content属性是整个内容区域在容器里面的水平位置，</li>
<li>align-content属性是整个内容区域在容器里面的垂直位置</li>
<li>place-content是两者的合并写法</li>
</ol>
</li>
<hr />
<h4>项目属性</h4>
<li>
<ol>
<li>
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
</li>
<li>
grid -column属性是grid-column-start和grid-column-end的合并写法，grid-row是grid-row-start和grid-row-end的合并写法
</li>
</ol>
</li>
</ul>
<span>foo</span>
<div class="wrapper">
<div class="item"><span>1</span></div>
<div class="item"><span>2</span></div>
<div class="item"><span>3</span></div>
<div class="item"><span>4</span></div>
<div class="item"><span>5</span></div>
<div class="item"><span>6</span></div>
</div>
<span>bar</span>
</body>
</html>
上一篇： 图论-SPFA算法
下一篇： SSH整合（配置文件）