面试题：CSS Grid网格布局中如何设置列的固定宽度和行的自适应高度？

Question

请描述在CSS Grid布局下，怎样实现列宽固定为200px，而行高能够根据内容自适应的方法，并给出相应的CSS代码示例。

Answer 1

在CSS Grid布局中，要实现列宽固定为200px，而行高根据内容自适应，可以通过以下方式：

1. 设置display: grid：将容器元素设置为网格布局模式。
2. 定义列宽：使用grid-template-columns属性设置列宽为200px。
3. 让行高自适应：不设置grid-template-rows属性，或者使用auto关键字，这样行高就会根据内容自动调整。

以下是CSS代码示例：

.container {
  display: grid;
  grid-template-columns: 200px;
  /* 如果有多列，可以写成 grid-template-columns: 200px 200px; 等 */
  gap: 10px; /* 可选，设置网格间隙 */
}

.item {
  background-color: lightblue;
  padding: 10px;
}

HTML代码示例：

<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2，这里内容可能更多，以展示行高自适应</div>
</div>

在上述代码中，.container类设置了网格布局，列宽固定为200px，行高根据每个.item元素的内容自适应。gap属性设置了网格之间的间距。每个.item类定义了元素的样式，如背景色和内边距。