CSS Grid Column Stretch to Fill Entire Row / Or Centered In Row?
This is a job for flexbox, I don't think it will be easy to achieve with CSS grid:
.grid-container { display: flex; flex-wrap:wrap; border:1px solid; margin:2px;}
.grid-container>div { height: 50px; background: red; margin: .5rem; flex: 1 1 calc(33% - 1rem);}
<div class="grid-container"> <div></div> <div></div> <div></div></div><div class="grid-container"> <div></div> <div></div> <div></div> <div></div></div><div class="grid-container"> <div></div> <div></div> <div></div> <div></div> <div></div></div>
CSS Grid - Stretch & wrap row based on adjacent siblings with a flat DOM
.container {
background: white;
border: dashed red 1px;
padding: 24px;
max-width: 1080px;
display: flex;
flex-wrap: wrap;
gap: 2rem 2rem;
}
.item {
background: lightgray;
min-width: 200px;
min-height: 100px;
display: grid;
place-content: center;
text-align: center;
font-size: 24px;
font-family: 'Helvetica';
flex: 1 0 calc(33% - 2rem);
}
.item-type-a {
flex-basis: 100%;
}
<div class="container">
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-a">Type A</div>
</div>
Wrapping css grid and streching one grid item to take up all empty columns
It can be achieved with display: flex
. In addition, it is necessary to use flex-grow
property.
As mdn says about flex-grow
:
The flex-grow CSS property sets the flex grow factor of a flex item's
main size
* {
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-element {
width: 10%;
border: 1px solid #000;
flex-grow: 1;
min-height: 120px;
box-sizing: border-box;
margin: 0 5px 10px;
justify-content: space-between;
text-align: center;
}
<div class="flex-container">
<div class="flex-element">
1
</div>
<div class="flex-element">
2
</div>
<div class="flex-element">
3
</div>
<div class="flex-element">
4
</div>
<div class="flex-element">
5
</div>
<div class="flex-element">
6
</div>
<div class="flex-element">
7
</div>
</div>
make a single row in CSS grid span all columns
Maybe it is better to use:
fieldset legend {
grid-column: 1/-1;
}
Or if you only need 3 columns
fieldset legend {
grid-column: 1/ span 3;
}
How to stretch last grid item across full width of screen, when it goes to new row?
Not sure if grid is your best option in this scenario.
You might want to use a flex container, setting flex-grow: 1 and min-width on the items.
Example:
.container {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.item {
min-width: 30rem;
flex-grow: 1;
box-sizing: border-box;
justify-content: space-between;
}
Related Topics
What Is the Character Limit on Url
How to Change the Opacity (Alpha, Transparency) of an Element in a Canvas Element
How to Rename HTML "Browse" Button of an Input Type=File
Min-Height Does Not Work with Body
All Widths Set to Width of Widest Element
Exclude Menu Item from the Collapse of Bootstrap 3 Navbar
Html:How to Show Images in a Textarea
Remove Space Above and Below <P> Tag HTML
How to Set a Background in a Bootstrap Column That Oversizes the Div
Html/CSS How to Add Image Icon to Input Type="Button"
How to Vertically Center a <Span> Inside a Div
HTML Image Not Showing in Gmail
How to Increase a Scrollbar's Width Using CSS
Using Z-Index to Get Div Above Another Div
How to Disable Form Fields Using CSS
Is the HTML Shown via 'View Source' Different from the HTML Shown in (Firebug) Developer Tools
How to Force a Download File Prompt Instead of Displaying It In-Browser with HTML