CSS: Full width Background for new css grid

Question

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.

Why you can just add background image to grid container and use `background-image` size and `background-position` to control it's alignment? By the way you can add horizontal padding with `10%` instead of blank columns. — Vadim Ovchinnikov, Aug 06 '17 at 12:26
if I add background-image to #site I can't specify different backgrounds per row. And if I add it to the row (e.g. to the header) it's inside the area — PhilHarmonie, Aug 06 '17 at 12:33
Actually you can add multiple backgrounds using background CSS property and position them per every row/column/any area. — Vadim Ovchinnikov, Aug 06 '17 at 13:11
and this should be best practice? Btw: I'm trying to set colors not images. — PhilHarmonie, Aug 06 '17 at 13:30
Wrote an answer with 3 options, pick the best which you think is the "best practice". — Vadim Ovchinnikov, Aug 06 '17 at 13:43
Possible duplicate of [How to vertically align objects in CSS when working with CSS grids?](https://stackoverflow.com/questions/45562613/how-to-vertically-align-objects-in-css-when-working-with-css-grids) — dube, Jan 16 '18 at 15:48

TristanSchaaf · Accepted Answer · 2017-08-25T14:17:45.053

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

`padding: 0 100vw;` and `margin: 0 -100vw;` with little modification and that's my preferred solution. — Daniel Danielecki, Jun 09 '20 at 07:57

Vadim Ovchinnikov · Answer 2 · 2018-05-31T18:05:19.897

1

I see 3 options here

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.
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).
Absolutely positioned elements of grid container.

edited May 31 '18 at 18:05

answered Aug 06 '17 at 13:42

Vadim Ovchinnikov

13,327
5
62
90

1

If any of these options is best practice, css grid sucks. There should be something better. – PhilHarmonie Aug 06 '17 at 13:47

score 0 · Answer 3 · answered Aug 08 '19 at 07:06

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

CSS: Full width Background for new css grid

3 Answers3