CODEWITHSUNDEEP
htmlcsscss-grid
Hendrik
Hendrik

Reputation: 177

How to give a number of columns with CSS grid where I have grid-auto-flow set to column

I have a list of time slots, the grid-auto-flow is set to column. On a small screen I want 1 column, on a big screen (max) 4 columns. As you can see in the code below I use grid-template-rows: repeat(8, 1fr);

How can I just give the numbers of columns instead of using grid-template-rows: repeat(8, 1fr);?

.container {
    display: grid;
    grid-gap:20px;
}

.container > .slot {
    background:tomato;
    font-size:30px;
    padding:10px;
}

@media (min-width: 600px) {
  .container  {
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 1fr);
  }
}
<div class="container">

<div class="slot">12.00</div>
<div class="slot">12.15</div>
<div class="slot">12.30</div>
<div class="slot">12.45</div>

<div class="slot">13.00</div>
<div class="slot">13.15</div>
<div class="slot">13.30</div>
<div class="slot">13.45</div>

<div class="slot">14.00</div>
<div class="slot">14.15</div>
<div class="slot">14.30</div>
<div class="slot">14.45</div>

<div class="slot">15.00</div>
<div class="slot">15.15</div>
<div class="slot">15.30</div>
<div class="slot">15.45</div>

<div class="slot">16.00</div>
<div class="slot">16.15</div>
<div class="slot">16.30</div>
<div class="slot">16.45</div>

<div class="slot">17.00</div>
<div class="slot">17.15</div>
<div class="slot">17.30</div>
<div class="slot">17.45</div>

<div class="slot">18.00</div>
</div>

Upvotes: 1

Views: 1137

Answers (2)

Temani Afif
Temani Afif

Reputation: 272816

This is a job for Columns and not CSS grid:

.container>.slot {
  background: tomato;
  font-size: 30px;
  padding: 10px;
  margin-bottom: 20px;
  /* we use inline-block because block is buggy with column*/
  display: inline-block;
  width: 100%;
  /**/
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .container {
    column-count: 4;
    column-gap: 20px;
  }
}
<div class="container">

  <div class="slot">12.00</div>
  <div class="slot">12.15</div>
  <div class="slot">12.30</div>
  <div class="slot">12.45</div>

  <div class="slot">13.00</div>
  <div class="slot">13.15</div>
  <div class="slot">13.30</div>
  <div class="slot">13.45</div>

  <div class="slot">14.00</div>
  <div class="slot">14.15</div>
  <div class="slot">14.30</div>
  <div class="slot">14.45</div>

  <div class="slot">15.00</div>
  <div class="slot">15.15</div>
  <div class="slot">15.30</div>
  <div class="slot">15.45</div>

  <div class="slot">16.00</div>
  <div class="slot">16.15</div>
  <div class="slot">16.30</div>
  <div class="slot">16.45</div>

  <div class="slot">17.00</div>
  <div class="slot">17.15</div>
  <div class="slot">17.30</div>
  <div class="slot">17.45</div>

  <div class="slot">18.00</div>
</div>

Upvotes: 3

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

You can use grid-template-columns: 1fr; and grid-template-columns: 1fr 1fr 1fr 1fr;.

Note: Also, you can use grid-auto-rows: 100px; to set the height of the rows.

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

.container > .slot {
    background:tomato;
    font-size:30px;
    padding:10px;
}

@media (min-width: 600px) {
  .container  {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
<div class="container">

<div class="slot">12.00</div>
<div class="slot">12.15</div>
<div class="slot">12.30</div>
<div class="slot">12.45</div>

<div class="slot">13.00</div>
<div class="slot">13.15</div>
<div class="slot">13.30</div>
<div class="slot">13.45</div>

<div class="slot">14.00</div>
<div class="slot">14.15</div>
<div class="slot">14.30</div>
<div class="slot">14.45</div>

<div class="slot">15.00</div>
<div class="slot">15.15</div>
<div class="slot">15.30</div>
<div class="slot">15.45</div>

<div class="slot">16.00</div>
<div class="slot">16.15</div>
<div class="slot">16.30</div>
<div class="slot">16.45</div>

<div class="slot">17.00</div>
<div class="slot">17.15</div>
<div class="slot">17.30</div>
<div class="slot">17.45</div>

<div class="slot">18.00</div>
</div>

Upvotes: -1

Related Questions