css代码演示： *{ margin:0; padding:0; box-sizing:border-box; } body{ display:flex; /水平和垂直居中/ justify-content:center; align-items:center; /visualwindow/ max-宽度：100vw； 最小高度：100vh； } .contert{ 最小宽度：1000px； 显示：网格； 间隙：5px；} .contert>.row{ display:grid; grid-template-columns:repeat(12,1fr); gap:5px; min-height:50px; } .contert>.row>.item{ background-color:aquamarine; padding:10px; border:1pxsolid; } /commongridcolumn-style/ .col-1{ grid-column-end:span1; } .col-2{ grid-column-end:span2; } .col-3{ grid-column-end:span3; } .col-4{ grid-column-end:span4; } .col-5{ grid-column-end:span5; } .col-6{ grid-column-end:span6; } .col-7{ grid-column-end:span7; } .col-8{ grid-column-end:span8; } .col-9{ grid-列结束：span9; } .col-10{ 网格列结束：span10; } .col-11{ 网格列结束：span11; } .col-12{ grid-column-end:span12; } 个人总结： 今天模仿了12列的网格布局，突然发现好像打开了新世界的大门，于是设置起来advance然后直接在页面上使用感觉真的很方便快捷。做一个三栏布局，直接引用，基本上写一点代码，整个总布局就出来了。这实在是太快了，让我有些吃惊。我一起惊奇，感受代码的魅力。这速度真是让我眼前一亮。回想一下我用flex布局写过这样一个三栏布局。虽然不是特别难，但是和这个格子有关。就布局而言，真是天上地下，完全没有可比性，也让我更加坚定了要把这个布局牢牢握在自己手里的决心。 今天除了老师对整个项目布局的讲解，也让我有所启发。写项目的时候不知道怎么下手，也没谈。同时yess直接写页面，慢慢写再慢慢改，我没有写文档的习惯，但是今天老师讲了之后，我才意识到这个过程是多么的重要。这是写代码的第一步，我以前从来没有这样做过，所以导致我每次都写。当我在页面上时，我感到头晕目眩。我不知道从哪里开始。有时候不知道自己之前写的代码哪里写的太多了。先把总体布局写成文档，这样自己就有一个大概的思路，这样项目写起来会更快，出错的机会也会减少。 还有关于flex和grid的布局联系。老师画的两张图，让我有更深的感受。 flex:Item——>Container（是一个超大的cell集合/网格区域） grid:Item——>Cell——>Container 就是这样一张图让我更加直观的理解了两者的区别和交互应用。整体布局采用grid布局，而单行采用flex布局。两种交互应用，布局更方便，操作更简单。
