gap below box 1 when i change its height

user_14429483 0
Viewed 48

i am a noob in CSS i have created 7 divs and their height and width are set to auto. only the height of div 1 is set to 100 px. These are placed inside div of wrapper class

when i see the output it creates a gap below div1 (gap color is black). is display:grid; effecting it?

enter image description here

.wrapper {
  background-color: rgb(0, 0, 0);
  height: 50vh;
  width: 100%px;
  display: grid;
}

.one {
  background-color: darkgrey;
  height: 100px;
  width: auto;
}

.two {
  background-color: rgb(0, 225, 255);
  height: auto;
  width: auto;
}

.three {
  background-color: rgb(17, 0, 255);
  height: auto;
  width: auto;
}

.four {
  background-color: rgb(136, 255, 0);
  height: auto;
  width: auto;
}

.five {
  background-color: rgb(17, 0, 255);
  height: auto;
  width: auto;
}

.six {
  background-color: rgb(217, 255, 0);
  height: auto;
  width: auto;
}

.seven {
  background-color: rgb(255, 0, 0);
  height: auto;
  width: auto;
}
<div class="wrapper">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
  <div class="seven">7</div>

</div>

css html
2 Answers

It seems the grid isn't calculating row height properly because on the first row, you've used the regular height property. I think you need to tell css grid how exactly how to layout the cells with grid-template-rows. Also you don't need appear to need all the extra width:auto directives (I think if it's not specified it's auto already)

.wrapper{
    background-color: rgb(0, 0, 0);
    height:50vh;
    width:100%;
    display: grid;
    grid-template-rows:100px;  
}
.one{
    background-color: darkgrey;
}
.two{
    background-color: rgb(0, 225, 255);
}
.three{
    background-color: rgb(17, 0, 255);
}
.four{
    background-color: rgb(136, 255, 0);
}
.five{
    background-color: rgb(17, 0, 255);
}
.six{
    background-color: rgb(217, 255, 0);
}
.seven{
    background-color: rgb(255, 0, 0);
}
<div class="wrapper">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
       
    </div>

user_2448110

I dont know what exactly causes it, you (and me) should learn the deployment of the CSS-grid on the screen. But till then you should set rows height from the wrapper, who has the display:grid property with grid-auto-rows. like this:

 .wrapper {
        background-color: rgb(0, 0, 0);
        height:50vh;
        width:100%px;
        display: grid;
        grid-auto-rows: 100px auto auto auto auto auto auto;
    }
...

Note: 6 autos for rest 6 rows... it counts... and seriously consider using flex-box which is way more accurate and predictable

user_100715760
Related