Specify Number of Rows and Columns in Grid

Admin 1
Viewed 4651

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

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>

twitter-bootstrap css html
2 Answers

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.

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

Also see CSS Grid Layout.

.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>

user_9242990

using Bootstrap 4 - 3 rows x 4 columns

<div class="container">
  <!-- row one -->
  <div class="row">
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
  </div><!-- /.row -->
  <!-- row two -->
  <div class="row">
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
  </div><!-- /.row -->
  <!-- row three -->
  <div class="row">
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
  </div><!-- /.row -->

</div><!-- /.container -->

Of course you will need to link to Bootstrap CDNs for this to work

user_37110830
Related