HTML CSS 网格布局：一个列自适应内容，另一个填充剩余空间

在本文中，我们将介绍如何使用HTML和CSS来创建一个网格布局。我们的目标是实现一个网格，其中一个列自适应内容的宽度，而另一个列则填充剩余的空间。

阅读更多：HTML 教程

什么是网格布局？

网格布局是一种强大的CSS布局系统，可让我们将网页划分为多个区域，使得我们可以更灵活地控制其中的内容。网格布局由行和列组成，我们可以在这些行和列上放置元素。

创建网格容器

首先，我们需要创建一个包含要放置在网格中的元素的容器。我们可以使用HTML中的<div>元素来创建这个容器。在CSS中，我们会为这个容器添加一个唯一的类，以便样式化和定位。

<div class="grid-container">
  <!-- 在这里放置内容 -->
</div>

添加样式

现在，我们要为这个网格容器添加一些样式。我们可以使用CSS网格属性来定义网格的布局。对于我们的要求，我们需要将容器划分为两列，其中一个自适应内容，而另一个填充剩余空间。

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

display: grid;属性将容器设置为网格布局模式。
grid-template-columns: auto 1fr;属性定义了两列。其中，auto表示这一列将自适应内容的宽度，1fr表示这一列将填充剩余的空间。

添加内容

现在，我们可以在这个网格容器中放置内容了。我们可以使用<div>元素或其他HTML元素来放置我们的内容。在这个例子中，我们将使用两个<div>元素。

<div class="grid-container">
  <div class="column1">
    <!-- 这里放置内容 -->
  </div>
  <div class="column2">
    <!-- 这里放置内容 -->
  </div>
</div>

样式化内容

我们可以为容器中的每个列添加样式，以使其看起来更具吸引力。

.column1 {
  background-color: #f1f1f1;
  padding: 10px;
}

.column2 {
  background-color: #d3d3d3;
  padding: 10px;
}

background-color属性设置背景颜色。
padding属性设置元素的内边距。

示例

假设我们要创建一个网格布局，其中左侧的列包含一个带有文本的框，右侧的列将自适应剩余的空间。

<div class="grid-container">
  <div class="column1">
    <strong>左侧栏</strong>
    <p>这是左侧栏中的文本内容。</p>
  </div>
  <div class="column2">
    <strong>右侧栏</strong>
    <p>这是右侧栏中的文本内容。</p>
    <p>这是右侧栏中的其他文本内容。</p>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.column1 {
  background-color: #f1f1f1;
  padding: 10px;
}

.column2 {
  background-color: #d3d3d3;
  padding: 10px;
}

使用上述的HTML和CSS代码，我们可以得到一个具有自适应左侧栏和填充右侧栏的网格布局。左侧栏会根据其中的内容自动调整宽度，而右侧栏则会填充剩余的空间。