Is it possible to change the background color of what's outside of a grid-container start/end without changing its parent?

Question

How can I color the black part around and between the cols but not changing main?

 mainmainmainmain
 col1col1col col2              //where I want to fill in background-color OUTSIDE of grid start/end

main, col1 and col2 are inside of the class .form-container. I would like to change the background color of col1 and col2 where it falls outside of the grid start/end without changing it's wrapper (form-container). Currently, it inherits the color of its wrapper.

<header></header>
<main class="form-container">
  <form class="booking-form"> main takes up 100% horizontally </form> 
  <div class="selection"> col-1 takes up about 80% horizontally </div>
  <div class="booking-detail"> col-2 takes up about 20% horizontally </div>
</main>

.form-container {
     display: grid;
     grid-template-columns: repeat(24, 1fr);
    }
    .booking-form {
     grid-column: 3 / span 20;  
    }
    .selection {                  
     grid-column: 3 / span 15;     //how to color outside of 3 and 15 (from 0 to 2 and from 16 till end)
    }
    .booking-detail {              
     display: block;             
     grid-column: 19 / -2;
    }

This is the most similar question but I don't think it applies here.

Could you actualy share the code you similar because like this there is no grid or class as you mentionned in your question. Thanks in advance for the helpers — MaxiGui, Sep 11 '20 at 15:41

score 1 · Answer 1 · answered Sep 16 '20 at 13:24

All you need to do is to use the ::before and ::after pseudo-elements. A sample code is given here

    .form-container::before{
        content: "this is the before to main";
        display: block;
        grid-column: 1/ span 2;
        grid-row: 1 / span 400;
        background-color: red;
    }
    .form-container::after{
        content: "this is the after to main";
        display: block;
        grid-column: 18 / 25;
        grid-row: 2 / span 400;
        background-color: purple;
    }

The thing is that you need to do this to the main, if you try it with the grid-child elements (.selection etc), it won't work.

The 400 in grid-row is to ensure that it covers all the available space.

score 0 · Answer 2 · answered Sep 17 '20 at 16:37

Yes, that would be helpful. I am unclear on what you're actually trying to do. I think that this will work (I have tested it and stuff, I am just unclear what you're actually trying to accomplish is)

.form-container {
     display: grid;
     grid-template-columns: repeat(24, 1fr);
    }
    .booking-form {
     grid-column: 3 / span 20;  
    }
    .selection {                  
     grid-column: 3 / span 15;     //how to color outside of 3 and 15 (from 0 to 2 and from 16 till end)
    }
    .booking-detail {              
     display: block;             
     grid-column: 19 / -2;
    }
main {
  background: black;
}
.booking-form {
  background-color: red;
}
.selection {
  background: blue;
}
.booking-detail {
  background: green;
}

score 0 · Answer 3 · edited Sep 20 '20 at 03:30

Based on your HTML and CSS, your grid layout looks like this:

How can I color the black part around and between the cols but not changing main?

You can position grid items into the same grid cells or allow them to overlap, thus you can simply introduce a new item - let call it div.background-item - and span it over the entire second row; it is important that this item appears before the col items like so:

class App extends React.Component {
  render() {
    return (
      <main className="form-container">
        main
        <form className="booking-form">booking-form</form>
        <div className="background-item"/>
        <div className="selection">col-1</div>
        <div className="booking-detail">col-2</div>
      </main>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

.form-container {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  background: black;
  height: 500px; /* dummy height */
  color: white;
  font-weight: bolder;
  font-size: 1.5rem;
}

.booking-form {
  grid-row: 1;
  grid-column: 3 / span 20;
  background: burlywood;
}

.background-item {
  background: red;
  grid-row: 2;
  grid-column: 1 / -1;
}

.selection {
  grid-row: 2;
  grid-column: 3 / span 15;
  background: green;
}

.booking-detail {
  grid-row: 2;
  grid-column: 19 / -2;
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Since this question seems to be relevant to this one, and based on your grid layout, the answer here can be adjusted accordingly. Afterwards you would get something like this:

StackBlitz App: https://react-sticky-stackoverflow-63850173.stackblitz.io

StackBlitz Editor (source code): https://stackblitz.com/edit/react-sticky-stackoverflow-63850173?file=App.js

score 0 · Accepted Answer · answered Sep 20 '20 at 22:11

0

You can easily achieve this using the box-shadow property

.selection {
  box-shadow: -20rem 0 red, 40rem 0 red;
}

increment or decrement the rem size as you see fit

answered Sep 20 '20 at 22:11

Is it possible to change the background color of what's outside of a grid-container start/end without changing its parent?

4 Answers4