Search code examples
htmlcsscss-grid

Exclude headings from CSS Grid

I added some sub headings to a HTML page but the sub heading causes the columns to display incorrectly as shown in this image.

enter image description here

I have already tried display block on the sub heading but i assume there's a different method when using display: grid;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  background-color: #2196F3;
}
.grid-item {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}

   
 <div class="grid-container">
  
  <a href="#"><div class="archive-title">Sub Header</div></a>

  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  
  <a href="#"><div class="archive-title">Sub Header</div></a>
  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
  
  <a href="#"><div class="archive-title">Sub Header</div></a>
  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

The sub headings should be 100% width for each row not column.

Solution

  • Edit: Use the grid-column property for the .archive-title divs:

    .grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  padding: 20px;
  background: gray;
  border: solid 1px lightgray;
}

.archive-title{
  background: lightgray;
  grid-column: 1/4;
}
    <div class="grid-container">
  
  <div class="archive-title">Sub Header</div>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  
  
    <div class="archive-title">Sub Header</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
  
  
    <div class="archive-title">Sub Header</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>