I have been trying to create a simple responsive webpage using CSS grid. But the div just after the CSS grid overwrites on the grid's content instead of writing below.
I could solve the problem by increasing padding below. But this solution fails if I increase the number of cards. Is there a method such that CSS grid automatically takes as much height as needed.
Or maybe I am perceiving the root of the problem to be something else and it might be completely unrelated to grid height. In any case, what should be done such that overwriting stops?
Please see the issue here : https://jsfiddle.net/9e7Lm6vg/5/
`
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-container{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: max-content;
padding: 2% 10% 2% 10%;
grid-row-gap: 2%;
grid-column-gap: 5%;
}
.card{
border-radius: 10%;
box-shadow: 0.5rem 0.5rem 0.6rem 0.1rem gray;
overflow: hidden;
}
.card:hover{
transform: scale(1.05);
}
.card-body{
padding: 2% 2% 2% 5%;
}
.card-title{
font-family: serif;
font-size: xx-large;
color: darkred;
text-align: center;
padding-bottom: 2%;
}
.card-desc{
color: black;
font-family: monospace;
}
.card-img{
width: 100%;
}
.card-header{
padding: 2%;
text-align: center;
text-transform: uppercase;
font-family: monospace;
background-color: darkred;
color: white;
}
html{
height: 100%;
}
body{
height: 100%;
}
#root{
height: 100%;
}
`
<div id="root">
<div >
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
<div >
<div >
Breakfast
</div>
<img src="./React App_files/loudr2go_aloo-poha_625x300_05_August_21.jpg" alt="">
<div >
<div >
Poha
</div>
<div >
Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples
</div>
</div>
</div>
</div>
<h1>This line here writes over the cards. Why?</h1>
</div>
`
CodePudding user response：
I think the only way to make a responsive website using css is using
@media{ //code }
CodePudding user response：
Upto my knowledge don't use percentage in row and column gaps, this have some issue better use other units and that's it that's the whole problem and remove the div with id top its unnecessary
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-container{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: max-content;
padding: 5%;
grid-row-gap: 20px;
grid-column-gap: 10px;
}
.card{
border-radius: 10%;
box-shadow: 0.5rem 0.5rem 0.6rem 0.1rem gray;
overflow: hidden;
}
.card:hover{
transform: scale(1.05);
}
.card-body{
padding: 2% 2% 2% 5%;
}
.card-title{
font-family: serif;
font-size: xx-large;
color: darkred;
text-align: center;
padding-bottom: 2%;
}
.card-desc{
color: black;
font-family: monospace;
}
.card-img{
width: 100%;
}
.card-header{
padding: 2%;
text-align: center;
text-transform: uppercase;
font-family: monospace;
background-color: darkred;
color: white;
}