如何用CSS制作两列？

holgip5t 于 2023-02-10 发布在其他

关注(0)|答案(3)|浏览(156)

我有一个N个元素的数组：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

我需要按以下顺序创建两列：
如果我们有10个元素：
如果我们有9个元素：
如果我们有7个元素：
CSS应该把元素分成两列。
元素的数量不是常数。
react中的代码非常简单：

numList.map(item => (
            <div>{item}</div>
          ))

我可以用js把元素数组分成两个数组，然后把它分别呈现为两个列表，用flex为它做列。
但是我想知道是否有一种方法可以只使用CSS而不使用JS。
如何用CSS制作两列？

css

来源：https://stackoverflow.com/questions/75382781/how-to-make-two-columns-with-css

3条答案

按热度按时间

von4xj4u1#

根据您的示例，我认为只要一个简单的columns: 2就可以实现此功能。

body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wrapper {
  columns: 2;
  border: 1px solid black;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

赞(0）回复(0）举报 2023-02-10

ha5z0ras2#

可以使用grid-template-columns属性指定网格布局中的列数（和宽度）。这些值是以空格分隔的列表，其中每个值指定相应列的大小。
参考：CSS Grid Layout Module

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 20px 20px;
}

对于这个例子，我指定每列只有20px的宽度，你可以把自己的数字或自动宽度。你也可以使用重复功能重复相同模式的列多次。例如：

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

赞(0）回复(0）举报 2023-02-10

ctehm74n3#

最好的方法是给父div一个类，然后显示为网格，并在列中给出一列中需要的元素数量

.container{
display:grid;
grid-template-columns: repeat(5,1fr)}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

赞(0）回复(0）举报 2023-02-10

我来回答

如何用CSS制作两列？

3条答案

相关问题

热门标签

最新问答