CSS Grid 布局实例：双侧自适应，中间固定宽度的布局

CSS Grid 是一种强大的布局系统，可以轻松实现复杂的布局。在本文中，我们将探讨一种常见的布局：双侧自适应，中间固定宽度的布局。

布局示意图

在这种布局中，左右两侧的内容会自适应宽度，而中间的内容则会固定宽度。以下是布局示意图：

// www.javascriptcn.com code example
+-------------------------------------------------------+
|                                                       |
|  +----------------+  +----------------+  +----+     |
|  |                |  |                |  |    |     |
|  |   Left Column  |  |  Right Column  |  |    |     |
|  |                |  |                |  |    |     |
|  |                |  |                |  |    |     |
|  +----------------+  +----------------+  +----+     |
|                                                       |
|  +-----------------------------------------------+  |
|  |                                               |  |
|  |                Center Column                  |  |
|  |                                               |  |
|  +-----------------------------------------------+  |
|                                                       |
+-------------------------------------------------------+

实现步骤

要实现这种布局，我们需要使用 CSS Grid。以下是实现步骤：

1. 创建一个包含三列的网格，其中左右两列宽度为自适应，中间列宽度为固定宽度。
2. 在左侧和右侧列中放置内容。
3. 在中间列中放置内容，并将其宽度设置为固定值。

代码实现

以下是实现这种布局的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Grid Layout Example</title>
    <style>
      /* 创建一个包含三列的网格 */
      .container {
        display: grid;
        grid-template-columns: auto 800px auto;
        grid-template-rows: auto;
        grid-gap: 20px;
      }

      /* 左侧列 */
      .left-column {
        background-color: #ccc;
        padding: 20px;
      }

      /* 右侧列 */
      .right-column {
        background-color: #ccc;
        padding: 20px;
      }

      /* 中间列 */
      .center-column {
        background-color: #eee;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-column">
        <h2>Left Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod purus vel arcu euismod, sit amet aliquet nibh tincidunt. Sed vitae justo quis metus malesuada hendrerit.</p>
      </div>
      <div class="center-column">
        <h2>Center Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod purus vel arcu euismod, sit amet aliquet nibh tincidunt. Sed vitae justo quis metus malesuada hendrerit.</p>
      </div>
      <div class="right-column">
        <h2>Right Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod purus vel arcu euismod, sit amet aliquet nibh tincidunt. Sed vitae justo quis metus malesuada hendrerit.</p>
      </div>
    </div>
  </body>
</html>

指导意义

CSS Grid 布局是一种非常强大的布局系统，可以轻松实现复杂的布局。本文介绍的双侧自适应，中间固定宽度的布局是一种常见的布局，适用于许多网站和应用程序。通过学习本文，您可以了解如何使用 CSS Grid 实现这种布局，并将其应用于您自己的项目中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3a311a941bf71346f14db