<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局与排版</title>
<style>
html,
body,
div {
margin: 0;
padding: 0;
}
/* 案例1 */
.grid {
display: grid;
width: 420px;
background: #e4d6ba;
margin: 1em auto;
}
.g-namespace {
height: 400px;
grid-template-columns: [col1] 100px [col2] auto [col3] 100px;
grid-template-rows: [rows1] 25% [rows2] 100px [rows3] auto [rows4] 60px
}
.grid>div {
outline: 1px dotted;
}
/* 案例2 */
.grid2 {
display: grid;
width: 400px;
height: 400px;
margin: 1em auto;
}
.g2-namespace {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "头部 头部 头部" "左边 中间 右边" "底部 底部 底部";
}
.top {
grid-area: 头部 / 头部 / 头部 / 头部;
background: #32CD32;
}
.buttom {
grid-area: 底部 / 底部 / 底部 / 底部;
background: #FFD700;
}
.left {
grid-area: 左边 / 左边 / 左边 / 左边;
background: #EE82EE;
}
.right {
grid-area: 右边 / 右边 / 右边 / 右边;
background: #FF7F50;
}
</style>
</head>
<body>
<!-- 1.flex布局 这个就不多说了,我们经常用 2.grid布局 在这里顺便提一下,Flex是一维布局,Grid是二维布局。意思就是Flex只能同时在一个方向进行作用,而Grid却可以在纵横两个方向同时工作。 语法如下 display: grid/inline-grid; -->
<!-- gird: < 'grid-template'> |< 'grid-template-rows'> / [ auto-flow && dense? ] < 'grid-auto-columns'>? | [ auto-flow && dense? ] < 'grid-auto-rows'>? /< 'grid-template-columns'> -->
<!-- 给两个案例就能清楚的知道grid的使用方法了 -->
<!-- 案例 1 网格线命名-->
<div class="grid g-namespace">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 案例2 真命名空间布局-->
<div class="grid2 g2-namespace">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="buttom"></div>
</div>
<!-- 一些常用的灵活尺寸属性定义
fr:可伸缩长度单位,均分容器的宽度,网格容器中可用空间的一等份。
repeat():可以使用repeat()函数来标记轨道重复使用的部分,例如上面的样式就可以写成
auto:自由分配,由具体情况决定。
minmax():定义了一个长宽范围的闭区间。如果想让每行的高度随着内容自动填充,那么可以使用minmax()来确定最小值与最大值,
fit-content():同等于min(maximum size, max(minimum size, argument))。 -->
</body>
</html>
一个布局案例,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局案例</title>
<style>
html,
body,
div,
ul,
li {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.wrap {
margin: 0 auto 30px auto;
text-align: center;
padding: 10px;
}
.content {
display: grid;
}
.content>div {
border: 1px solid currentColor;
color: #FFF;
}
.fr-box {
background: #32CD32;
}
.auto-box {
background: #87CEEB;
}
.mc-box {
background: #C0C0C0;
}
.width-box {
background: #EE82EE;
}
.fc-box {
background: #FF7F50;
}
.mm-box {
background: #FFD700;
}
.list {
display: flex;
margin: 0 auto;
padding: 10px;
}
.list>li {
flex: 1;
text-align: center;
color: #FFF;
}
</style>
</head>
<body>
<div>
<ul class="list">
<li class="fr-box">绿色:fr</li>
<li class="auto-box">蓝色:auto</li>
<li class="mc-box">灰色:max-content</li>
<li class="width-box">粉红色:400px</li>
<li class="fc-box">橙色:fit-content(200px)</li>
<li class="mm-box">黄色:minmax(200px, 400px)</li>
</ul>
</div>
<section class="wrap fr-auto">
<div class="content" style="grid-template-columns: 1fr 2fr 1fr;">
<div class="fr-box">这是个盒子</div>
<div class="fr-box">这是个盒子</div>
<div class="fr-box">这是个盒子</div>
</div>
<div class="content" style="grid-template-columns: auto auto auto;">
<div class="auto-box">这是个盒子</div>
<div class="auto-box">这是个盒子</div>
<div class="auto-box">这是个盒子</div>
</div>
<div class="content" style="grid-template-columns: auto 1fr auto;">
<div class="auto-box">这是个盒子</div>
<div class="fr-box">这是个盒子</div>
<div class="auto-box">这是个盒子</div>
</div>
<div class="content" style="grid-template-columns: 1fr auto 1fr;">
<div class="fr-box">这是个盒子</div>
<div class="auto-box">这是个盒子</div>
<div class="fr-box">这是个盒子</div>
</div>
</section>
<section class="wrap mc-width">
<div class="content" style="grid-template-columns: 1fr max-content 400px;">
<div class="fr-box">这是个盒子</div>
<div class="mc-box">这是个盒子</div>
<div class="width-box">这是个盒子</div>
</div>
<div class="content" style="grid-template-columns: fit-content(200px) minmax(200px, 400px) 400px;">
<div class="fc-box">这是个盒子</div>
<div class="mm-box">这是个盒子</div>
<div class="width-box">这是个盒子</div>
</div>
<div class="content" style="grid-template-columns: fit-content(200px) max-content auto;">
<div class="fc-box">这是个盒子</div>
<div class="mc-box">这是个盒子</div>
<div class="auto-box">这是个盒子</div>
</div>
</section>
<section class="wrap fc-mm">
<div class="content" style="grid-template-columns: 1fr auto fit-content(200px);">
<div class="fr-box">这是个盒子</div>
<div class="auto-box">这是个盒子</div>
<div class="fc-box">这是个盒子</div>
</div>
<div class="content" style="grid-template-columns: fit-content(200px) minmax(200px, 400px) 400px;">
<div class="fc-box">这是个盒子</div>
<div class="mm-box">这是个盒子</div>
<div class="width-box">这是个盒子</div>
</div>
<div class="content" style="grid-template-columns: 1fr auto minmax(200px, 400px);">
<div class="fr-box">这是个盒子</div>
<div class="auto-box">这是个盒子</div>
<div class="mm-box">这是个盒子</div>
</div>
</section>
</body>
</html>
从中可以看出grid布局的一些属性特征,
如果要详情去学的话,可以自己去搜下学习,这里推荐一篇学习文章https://www.html.cn/archives/8510;里面写的很详细