Nested Flexbox Grid

Question

I\'ve built a nested flexbox grid that I\'ll be using for individual gateways. Currently, presumably due to the use of outline, the content within each container is

Answer 1

The simplest in this case would be to update the grid rule and either use a border

.flex-grid {
  .item {
    flex: 1;
    min-height: 150px;
  }
  .item--primary, .item--secondary, .item--tertiary {
    border: 2px solid white;
  }
}

or a margin (fiddle)

Stack snippet

.flex-grid .item {
  flex: 1;
  min-height: 150px;
}

.flex-grid .item--primary,
.flex-grid .item--secondary,
.flex-grid .item--tertiary {
  margin: 2px;
  background: lightgray;
}

.flex-grid .item--primary {
  margin-bottom: 0;
}

.flex__direction--column {
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
}

.flex__direction--row {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
}

  

    


      
      

        

          
Primary Gateway
          
It is a long established fact that a reader will be distracted by the readable.
        
      

      

        
        

          

            
Secondary Gateway
            
It is a long established fact that a reader will be distracted by the readable.
          
        
        

          

            
            

              

                
Tertiary Gateway
                
It is a long established fact that a reader will be distracted by the readable.
              
            
            
            

              

                
Tertiary Gateway
                
It is a long established fact that a reader will be distracted by the readable.