CSS Grid 布局实现多列布局技巧-JavaScript中文网-JavaScript教程资源分享门户

在现代Web开发中，实现多列布局是非常常见的任务。通常情况下，传统的布局方法往往需要使用浮动和Clearfix等技术来实现。这种方法的实现过程往往比较棘手，并且很难达到我们想要的效果。总的来说，这些传统布局方法已经过时了，而CSS Grid则成为更好的选择。

CSS Grid 基础知识

CSS Grid是一种基于网格的布局系统，它允许我们划分网页布局成为一个个的网格，来实现我们想要的布局样式。CSS Grid布局由两部分组成:容器和项目。

容器就是我们想要实现网格布局的父元素。要声明一个Grid容器，我们可以使用如下代码：

.container {
  display: grid;
}

成功声明了一个Grid容器后，我们可以使用grid-template-columns属性指定容器的列数。

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

上面代码中，我们将容器分为了三列。这里的"fr"单位相对于容器剩余空间来定义每一列的宽度，这样我们可以很方便的实现灵活的多列布局。

使用CSS Grid实现多列布局

现在我们有了一些关于CSS Grid基础知识，让我们来看一下如何用CSS Grid实现多列布局。

基本的多列布局

首先，我们可以创建一个简单的三列布局。代码如下：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

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

上面的代码将会创建一个三列布局。

具有固定宽度的多列布局

我们可以使用CSS Grid实现一个带有固定宽度的多列布局。类似这样的布局也是非常常见的。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

上面的代码将会创建一个3列布局，每一列的宽度为200像素。

具有自动调整宽度的多列布局

有时候，我们可能需要实现一个带有自动调整宽的多列布局。这里的“自动调整宽度”指的是，在一个元素的宽度超出了父容器的可用宽度的情况下，浏览器会自动将多余的内容自动换行到下一行。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

上面的代码将会实现一个6列布局，每一列的宽度为最小200像素，最大宽度为分配剩余空间。

具有自动调整宽度和WRAP的多列布局

有时候，在一个元素的宽度超出了父容器的可用宽度的情况下，我们不仅希望浏览器自动将多余的内容自动换行到下一行，还需要将多余的行继续自动排列到下一列中。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}

上面的代码将会实现一个自动调整宽度、自动分行调整和自动分列调整的6列布局。

总结

通过使用CSS Grid，我们可以更容易地设计和实现现代多列布局。

以上是本次CSS Grid布局实现多列布局技巧的学习总结，希望能够对大家有所帮助。如果想要快速地掌握CSS Grid布局，可以在我们的示例代码上实践。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652fdf4e7d4982a6eb117f71