Issue
How to override grid-template-columns property in child div
I have parent div where i used grid-template-columns and then 3 child div. I want first two div to be in same row with 50% width and third div should talk full width. So i am trying to overwrite grid-template-columns property in 3rd div with another CSS class but it is not overriding the property for 3 div.
Below is my code.
Please confirm how can i make 3rd child div to take full width.
.outer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 24px;
width: unset;
align-self: unset;
}
.full {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.inner {
height: 220px;
border: 1px solid red;
position: static;
}
<div class="outer">
<div class="inner"> this is first div
</div>
<div class="inner"> this is second div
</div>
<div class="inner full"> this is third div this is third div this is third div this is third div this is third div this is third div this is third div this is third div
</div>
</div>
Solution
To make the third child div take full width while the first two divs share the row equally in a CSS grid layout, you should use the grid-column
property on the third div
. The grid-template-columns
property you're trying to override in the .full
class is generally applied to the container (the grid itself), not the individual items.
Here's how you can modify your code:
.full {
grid-column: 1 / -1;
}
Answered By - Prajil K
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.