主页 / 问题 / 1605734
Accepted
kafpliz
Asked:2025-01-28 05:54:29 +0800 CST2025-01-28 05:54:29 +0800 CST

如何使用网格在两行中排列不确定数量的元素

  • 772

告诉我如何使用网格在两行中排列无限数量的列（和元素）

我正在尝试这样做：

grid-template-columns: repeat(auto-fill, 150px);
grid-template-rows: repeat(2, 300px);

它只是把它们放在一行上

或者一般如何解决这样的问题。

css3

2 个回答

  1. Best Answer

    如果您对方向的改变感到满意，您可以这样做：

    main {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 2em);
  gap: 1em;
}

div {
  background: silver;
  line-height: 2em;
  text-align: center;
}
    <main>
  <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>
</main>

    • 1

  2. 我将指定样式中的元素数量。

    下面的代码至少在 Chrome 131 和 FF 133 中有效，尽管我实际上对列的小数感到困惑......

    main {
  display: grid;
  grid-template-columns: repeat(calc(var(--n) / 2), 1fr);
  grid-template-rows: repeat(2, 2em);
  gap: 1em;
  margin-bottom: 2em;
}

div {
  background: silver;
  line-height: 2em;
  text-align: center;
}
    <main style="--n: 9">
  <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>
</main>

<main style="--n: 4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</main>

    如果浏览器支持允许，我会明确地用四舍五入来写它round：

    main {
  display: grid;
  grid-template-columns: repeat(round(up, var(--n) / 2, 1), 1fr);
  grid-template-rows: repeat(2, 2em);
  gap: 1em;
  margin-bottom: 2em;
}

div {
  background: silver;
  line-height: 2em;
  text-align: center;
}
    <main style="--n: 9">
  <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>
</main>

<main style="--n: 4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</main>

    但是，您可以一次指定列数 - 这样问题就会少一些：

    main {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(2, 2em);
  gap: 1em;
  margin-bottom: 2em;
}

div {
  background: silver;
  line-height: 2em;
  text-align: center;
}
    <main style="--cols: 5">
  <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>
</main>

<main style="--cols: 2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</main>

    • 0

相关问题