网格布局-一键布局尝试总结~

时间：2023-04-02 18:01:20 HTML

网格布局是什么？Grid（网格）布局使我们能够比以往更灵活地构建和控制自定义网格；能够将网页分成具有简单属性的行和列来完成网格布局我们需要它看起来像什么输入您的第一个网格布局HTML代码：box父元素，其中包含6个子元素items1

56要将方框变成网格（grid），只需设置显示属性togrid:.box{display:grid;}当然上图和grid没有任何关系，但是请记住“她”最后的样子~~为了让它成为一个二维的grid容器，我们需要定义列和行：创建3行（columns）2列（rows）CSS代码->.box{display:grid;grid-template-columns:50px50px50px;grid-template-rows:20px20px;}grid-template-columns创建列；创建几列并在后面写几个值；grid-template-rows创建行；创建几行并在其后写几个值；结果：确保您理解这些值涉及到网格的外观，看看这个例子。CSS代码.box{显示：网格；网格模板列：150px50px10px；grid-template-rows:50px30px;}请尝试理解上面的代码，思考上面的代码会产生什么样的布局。这就是上面代码布局的结果：是不是很容易理解，也很好用？深入探索推荐参考：5分钟学会CSSGrid布局如何使用CSSGrid快速灵活布局CSSGrid布局完全指南（图文并茂的Grid详细教程）

上一篇：LessMixing

下一篇：导航栏固定，锚点平滑滚动

网格布局-一键布局尝试总结~相关文章