CSS网格布局不会？代码改不顺？调试问题全解决。
学习网页布局时总被格子排版问题搞蒙，代码改来改去排不出想要的效果，这时候CSS Grid可能是救命稻草。先说清几个关键名词：主包裹盒子叫网格容器，里面的格子是网格项，格子边上的线是网格线。横竖两条线夹的地方叫网格轨道，多个轨道组成的大区域是网格区域。
要开始用Grid得先标记容器，给父元素加display:grid。默认情况下所有子元素都会变格子，这时候设置列宽用grid-template-columns，设置行高用grid-template-rows。数值可以写像素或fr分数单位，比如1fr 2fr就是右边格子两倍宽。格子超出容器会自动换行，但行数不会自己增加，只能随着格子数量变多。
设置间距要用column-gap和row-gap，这两个参数控制横竖方向的空白。比如写gap:20px就是横纵都留20像素。水平对齐用justify-items，值有start/end/center/stretch四种。整个网格左右对齐用justify-content，有space-between、space-around这些选项。垂直方向类似，换align开头的属性就行。
单位fr比百分比方便，1fr就是占可用空间的1份。min-content让格子刚好装下内容，max-content则完全展开内容宽度。写重复格子时用repeat函数，比如repeat(3,1fr)就是三个等宽格子。复杂布局可以用grid-template-areas预先命名区域，再分配子元素名字对应。
调试时右键检查元素，开启网格显示模式能看见蓝色的网格线和编号。通过chrome开发者工具可以直接拖拽调整数值，实时看布局变化。如果格子溢出或定位不准，多检查网格线的起始结束位置是否设置错。
网上有现成生成器辅助，比如cssgrid-generator和griddy，拖拽格子自动出代码。遇到特别复杂的响应式布局，配合媒体查询调整fr和百分比比例就行。学完这些基础操作实际敲几遍代码就上手了，不用纠结太多理论。
写错了网格线序号会跑位，多用1开始数清楚每条线的位置。想让格子跨多列就设置grid-column-start和grid-column-end差值，比如从第2条线到第4条线就是跨两格宽。网格项单独调位置时用place-self简写属性省事，不用逐个改对齐方式。
最后提醒，写代码时把注释写详细，方便后期维护。比如给网格区域命名header或footer，后面修改时好找。网格布局确实省事但需要耐心调试，多练习就能熟练用起来了。
