CSS网格布局真是设计网站的神器特别适合我们赶工期的人，有了它，排版问题不再头疼。今天咱们就来讲讲这个神奇的CSS网格布局，以后工作肯定会更有意思~
CSS网格布局是什么玩意儿？
讲讲这个CSS网格布局，真心帅气，比以前的浮动和弹性盒什么的好用多了。用它排版网页，简单得让人惊讶，再复杂的设计也能搞定。
容器和项目，一对好搭档
说起CSS网格布局，其实就跟搭架子卖货似的！这就是个能装下很多东西的地方，咱们再把各种小物件放上去。先搞定这个大框架（画好网格线），然后让每个小东西都找到自己的位置（准确无误地放在网格里），搞定啦～
.container {
显示：网格；
边框：1px 实心#000；
}
。物品 {
内边距：20px；
边框：1px实心#ccc；
}
定义列和行，就是这么简单
哥们儿，给你说个超牛的事，CSS网格可以随便设置固定列数和行数！只要记住两串神秘代码：grid-template-columns和grid-template-rows就成了。不管是几列几行，大还是小，统统搞定！这下子，排版肯定没问题~
.container {
显示：网格；
网格模板列：1fr 2fr 1fr；
网格模板行：自动 100px；
间隙：10px；
}
。物品 {
内边距：20px；
边框：1px实心#ccc；
}
把项目放到网格上，随心所欲
搞定网格布局后我们来加点料！用grid-column和grid-row这俩货，哪儿想让它们出来咱就随心所欲地放呗~
响应式设计，让网页更智能
项目 1项目 2项目 3
只要用上网格神器，咱就不怕分数（fr）、百分比（%）或者最小最大值（minmax）这些问题。手机也好电脑也罢，屏幕大小都不是事儿，看起来舒心，上网更开心！
.container {
显示：网格；
网格模板列：1fr 1fr 1fr；
网格模板行：自动 100px；
间隙：10px；
}
。物品 {
内边距：20px；
边框：1px实心#ccc；
}
.item1 {
网格列：1 / 3；
网格行：1 / 2；
}
.item2 {
网格列：3 / 4；
网格行：1 / 3；
}
高级功能，让布局更复杂
别小看CSS网格真的可以做到很多牛逼的网页排版，看着难实际上用起来挺舒服的，做出来的页面也更有创意！
浏览器支持和工具，让开发更轻松
现在好多浏览器都能搞定CSS网格了！要是想要方便快捷地调整网格布局的话，就试试火狐里的GridInspector或者Chrome的DevTools，保证让你的开发变得轻松愉快！
项目 1项目 2项目 3项目 4
CSS网格布局，让网页设计更上一层楼
.container {
显示：网格；
网格模板列：重复（自动调整，minmax（200px，1fr））；
间隙：10px；
}
。物品 {
内边距：20px；
边框：1px实心#ccc；
}
哎呀CSS网格排版真是牛！做个网页就像过家家一样简单，而且千变万化，就像是在玩魔术。学会了基本技巧和高级技术，你的网页设计就能更上一层楼，给用户带来超级棒的体验！
未来的网页设计，离不开CSS网格布局
标题内容
科技真是超级牛！CSS网格布局就像火箭一样火热，马上就要占领网页设计界！学会这招，网页设计变得轻而易举，颜值爆表，脑袋也更灵光了！别再犹豫了，赶紧跟上潮流，让你的网页炫酷到飞起！
.container {
显示：网格；
网格模板区域：
“标题标题”
“侧边栏内容”
“页脚页脚”；
间隙：10px；
}
. header {
网格区域：标题；
内边距：20px；
边框：1px实心#ccc；
}
.侧边栏{
网格区域：侧边栏；
内边距：20px；
边框：1px实心#ccc；
}
。内容 {
网格区域：内容；
内边距：20px；
边框：1px实心#ccc；
}
。页脚 {
网格区域：页脚；
内边距：20px；
边框：1px实心#ccc；
}
评论0