Exclude headings from CSS Grid

Question

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

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);
}

 
  
  Sub Header

  1
  2
  3  
  
  Sub Header
  
  4
  5
  6 
  
  Sub Header
  
  7
  8
  9

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

user_818326 · Answer

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;
}


  
  Sub Header
  1
  2
  3  
  
  
    Sub Header
  4
  5
  6 
  
  
    Sub Header
  7
  8
  9

user_11690443 · Answer

Try this:

HTML


    Selling
    
        
            
                $100,000For SaleAddressStateListing
        
    
    
        
            
                $100,000SoldAddressStateListing
        
    
    
        
            
                $100,000For SaleAddressStateListing
        
    


    
Sold

    
        
            
                $100,000For SaleAddressStateListing
        
    
        
            
                $100,000SoldAddressStateListing
        
    
    
        
            
                $100,000For SaleAddressStateListing

Issue was that the Sold link was appearing after the fourth card. Now the link is added after the third card.

user_11563725 · Answer

Solution:

First you can add the "Sold" hyperlink after thrid element listing..it'll be great. If you are not able to do that so you have to use DISPLAY : FLEX property..In display flex property you can easily change the order of the element...so can try the display flex...

Exclude headings from CSS Grid

3 Answers