指定网格中的行数和列数 [英] Specify Number of Rows and Columns in Grid

问题描述

是否可以指定网格中的行数和列数?

Is there any way to specify the number of rows and columns in a grid?

我的代码给了我3列4行.我想要4列和3行.有没有办法用CSS和HTML进行操作?我也愿意使用Bootstrap，尝试正确地编辑下面的代码.

My code is giving me 3 columns and 4 rows. I want 4 columns, and 3 rows. Is there way conduct this with CSS and HTML? I'm willing to use Bootstrap also, trying to edit the code below correctly.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<h1>Grid Elements</h1>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

推荐答案

您可以使用

You can use grid-template-columns to specify the number of columns.
The number of columns is defined by the number of values in the list.

以下，我正在使用 repeat() 作为生成四个值的简写.
根据您现有的代码， auto auto auto auto 也会起作用.

Below, I'm using repeat() as shorthand to generate four values.
Based on your existing code, auto auto auto auto would also work.

另请参见 CSS网格布局.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<h1>Grid Elements</h1>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

这篇关于指定网格中的行数和列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！