本文介绍了CSS中的grid布局，将其比喻为flex布局的升级版，强调了grid在布局上的优势。通过对比flex和grid实现自适应九宫格的简洁性，突显了grid的易用性。文章将重点放在grid的主要属性上，如grid-template-columns和grid-template-rows，并提到grid在处理复杂布局时的简便性。
自从用习惯flex布局我基本已经不怎么使用float了。
现在又出现了grid布局，就像flex的升级版，布局上十分强大。
主要属性：
grid-template-columns：//竖向排列
grid-template-rows：//横向排列
首先比较一下flex和grid实现自适应九宫格，高度800px，宽度适应：
flex
超过一层后样式就复杂了，特别是边框的处理有点复杂。(方法很多，不一一去展示了)。
<html>
<head>
<style type="text/css">
.box {
padding: 10px;
padding-bottom: 0;
padding-right: 0;
display: flex;
flex-direction: column;
height: 800px;
width: calc(100vw - 20px);
background-color: #000;
}
.content {
display: flex;
margin-bottom: 10px;
flex: 1
}
.b {
flex: 1;
margin-right: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class=
最低0.47元/天 解锁文章
9752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
