CODEWITHSUNDEEP
htmlcsscss-grid
PhilHarmonie
PhilHarmonie

Reputation: 435

CSS: Full width Background for new css grid

I am using the new css grid like this:

#site {
   display: grid;
   grid-template-columns: 10% 1fr 1fr 1fr 10%;
   grid-template-rows: 100px auto;
   grid-template-areas:
      ". header header header ."
      ". content content sidebar ."
}

So I have tow rows and 5 columns but only 3 columns with content. I'm using the dot in the template areas to define a white space. This results in having a 3 column layout with white space on the left and right side. If I place an element in a grid area that has a background color the white space left and right stays white (logically). What I want is a full width background (color) but I'm not really sure how to realise this. One option I have in mind is to have a second grid in the background that has the same columns and rows but not the white spaces and then I can fill it up with color but I think this is not best practice.

Upvotes: 2

Views: 5177

Answers (3)

Gabriel Grant
Gabriel Grant

Reputation: 5591

It sounds like what you're looking to do may be best addressed by the upcoming Subgrid feature, arriving in Level 2 of CSS Grid: this will allow outer elements and their children to both be laid out using the same grid.

As of today (Aug 8th, 2019) Subgrid has shipped in Firefox nightly, so will hopefully land in a real release soon (tracked here). Unfortunately, there hasn't been much movement yet from the Chrome team (please star the issue in the Chrome bug tracker to show your support)

In lieu of Subgrid arriving, what I've done is either define the same grid lines inside the container element, or, for the specific case of a full-width background, define a padding on the wrapper element that is equal in size to the width of the "empty" gutters on either side of the page. This is easiest/most reliable if you use vw units, and is fairly straightforward with the use of a variable in SASS or LESS

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

I see 3 options here

  1. You can set one or multiple backgrounds using CSS background color. Also this way you can set gradients and solid color can be imitated using gradients.
  2. Create grid item with background and manually set grid-row and grid-column with values that you need. This items should have negative z-index to be overlapped by other grid items (z-index is working even for statically positioned for grid items, the same is true about flex items).
  3. Absolutely positioned elements of grid container.

Upvotes: 1

TristanSchaaf
TristanSchaaf

Reputation: 124

Best I have found is put the grid inside a container for a certain width to center the content. And have items you need to extend the background give a huge left/right padding, and same margin negative.

Just be sure to give body an overflow-x: hidden;

<div class="container">
   <div id="site">
       <div class="header"></div>
       <div class="content"></div>
       <div class="footer"></div>
   </div>
</div>

And the CSS:

.container{
  width:1000px;
  margin: 0 auto; //
}    
#site {
  display: grid;
  grid-template-columns: 10% 1fr 1fr 1fr 10%;
  grid-template-rows: 100px auto;
  grid-template-areas:
     ". header header header ."
     ". content content sidebar ."
}

.header{
   background: red;
   padding: 0 3000px;
   margin: 0 -3000px;
}

body{
   overflow-x: hidden;
}

Upvotes: 2

Related Questions