6

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>
showdev
  • 28,454
  • 37
  • 55
  • 73

2 Answers2

4

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>
showdev
  • 28,454
  • 37
  • 55
  • 73
  • 1
    [Bootstrap's grid system](https://getbootstrap.com/docs/4.1/layout/grid/) relies on specifying [both rows and columns](https://stackoverflow.com/a/22053352/924299). The [answer from maik](https://stackoverflow.com/a/56799364/924299) is a good example. – showdev Jun 27 '19 at 23:25
  • cool, i accepted his answer, make sure you give thumbs up, thanks –  Jun 27 '19 at 23:27
0

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

inputforcolor
  • 909
  • 2
  • 15
  • 27
  • thanks, what if I don't know the number of items in grid, it can be 3,5,9. do I really have to specify number all 12 items? is there clean code way? –  Jun 27 '19 at 23:13
  • 1
    Not necessary to stipulate the total amount of columns _ If you are creating them dynamically simply ensure that they're individually given the .col class in the dynamic code & within an encompassing .row class and they will sort themselves out according to how many columns there are _ Be sure to maintain rows as required too _ Here's a link to a tutorial that might help _ https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp _ Alternatively you can use the Bootstrap 4 website for more details _ If this answer suits your needs please be sure to click the upvote on the side ; ) – inputforcolor Jun 27 '19 at 23:21