日常练习

大三做Web项目时，我发现很多同学（包括之前的我）还在用float和position来写页面布局，不仅代码冗余，而且一到手机端就“乱套”。最近我下定决心，要在日常练习中使用CSS Grid。

以前用Flexbox虽然解决了“一维”布局（横向或纵向），但遇到复杂的“二维”网格（比如既有行又有列的卡片墙），写起来还是很累。CSS Grid是专门为二维布局设计的，代码更简洁，控制力更强。

我的练习目标是做一个三列布局，在电脑上显示三列，平板上显示两列，手机上显示一列。

HTML结构很简单：

<div class="skills-container">
  <div class="skill-item">HTML/CSS</div>
  <div class="skill-item">JavaScript</div>
  <div class="skill-item">React</div>
  <div class="skill-item">Node.js</div>
  <div class="skill-item">Python</div>
  <div class="skill-item">Git</div>
</div>

1. 定义容器为Grid：

.skills-container {
  display: grid;
  gap: 20px; /* 统一设置间距，比margin方便多了 */
  padding: 20px;
}

2. 电脑端（3列）：
   这里我使用了repeat()函数和minmax()函数，让列宽自适应，最小200px，最大1fr（等分剩余空间）。

@media (min-width: 1024px) {
  .skills-container {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
}

3. 平板端（2列）：

@media (min-width: 768px) and (max-width: 1023px) {
  .skills-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

4. 手机端（1列）：
   默认就是1列，不需要写额外代码，或者为了保险可以显式声明：

@media (max-width: 767px) {
  .skills-container {
    grid-template-columns: 1fr;
  }
}

如果用传统的float来做，我可能需要给每个.skill-item设置width: 33.333%，还要用clearfix清除浮动，在响应式时还要用复杂的nth-child选择器来清除边距。代码量至少是现在的两倍。

而用Grid，我只需要在容器上定义规则，子元素会自动排列，完全不需要修改HTML结构。这种“容器驱动”的思维，让我对布局的理解更深了一层。