Simple css grid columns for content

by ian_smithz

HTML

<div class="grid-col-2-container">

  <div class="grid-item">

    <p>Grid item</p>
      
  </div>

  <div class="grid-item">

    <p>Grid item</p>
    
  </div>

  <div class="grid-item">

    <p>Grid item</p>
      
  </div>

  <div class="grid-item">

    <p>Grid item</p>
    
  </div>

</div>

<div class="grid-col-3-container">

  <div class="grid-item">

    <p>Grid item</p>
      
  </div>
  
  <div class="grid-item">

    <p>Grid item</p>
      
  </div>

  <div class="grid-item">

    <p>Grid item</p>
    
  </div>
  
  <div class="grid-item">

    <p>Grid item</p>
      
  </div>
  
  <div class="grid-item">

    <p>Grid item</p>
      
  </div>

  <div class="grid-item">

    <p>Grid item</p>
    
  </div>

</div>

CSS

@media (min-width: 768px) {
  .grid-col-2-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  .grid-col-3-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }
  .grid-col-4-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
  }
}

.grid-item {
  background-color: #00486e;
  padding: 0.5rem;
  color: #fff;
  /* display grid only works on first child of grid container (for now). Display sub-grid is coming to a browser near you... soon. */
}