Kevin Powell - Community•10mo ago

need help with grid

body{
    background: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
    height: 300vw;
    // position: sticky;
}

#container {
  display: grid;
  
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-gap: 4px;
  height: 100%;
//   grid-auto-flow: row;
  
  background-color: #2196F3;
  border: 1px solid blue;//delte in final work
}

.banner {
    grid-area: 1 / 1 / 1 / 9;
    background-color: blue;
    // width: 100%;
}

.middlebackground {
    // height: 400px;
    // width: 100%;
    grid-area: 3 / 3 / 6 / 10;
    background-color: white;
}

body{
    background: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
    height: 300vw;
    // position: sticky;
}

#container {
  display: grid;
  
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-gap: 4px;
  height: 100%;
//   grid-auto-flow: row;
  
  background-color: #2196F3;
  border: 1px solid blue;//delte in final work
}

.banner {
    grid-area: 1 / 1 / 1 / 9;
    background-color: blue;
    // width: 100%;
}

.middlebackground {
    // height: 400px;
    // width: 100%;
    grid-area: 3 / 3 / 6 / 10;
    background-color: white;
}

how can i cover the grid area to cover the area without using width and height.

1 Reply

Jochem•10mo ago

@chrono1913 this is a front end question, please repost it in #front-end Also please share a live example of your code, give #how-to-ask-good-questions a look. A codepen example really gives you a better chance to get an answer I'm closing this post because it's in the wrong channel

Gaming

Programming

need help with grid