Can auto margins work in CSS Grid like they do in Flexbox?
There is a way to get your request, that can be considered a little bit hackish, but that is effective.
Create an arbitrary number of unused rows between all the list elements and the last one. Here a snippet that will work as far as the list has less than 99 elements:
ul {
list-style-type: none;
padding: 0;
display: grid;
outline: 1px solid red;
height: 150px;
background-color: lime;
grid-template-rows: repeat(99, max-content) 1fr [last];
}
li {
background-color: cornsilk;
}
li:last-of-type {
grid-row: last;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Why do block elements with margin auto behave differently inside a grid?
From the specification:
By default, grid items stretch to fill their grid area. However, if justify-self or align-self compute to a value other than stretch or margins are auto, grid items will auto-size to fit their contents.
Better way to set distance between flexbox items
- Flexbox doesn't have collapsing margins.
- Flexbox doesn't have anything akin to
border-spacing
for tables (edit: CSS propertygap
fulfills this role in newer browsers, Can I use)
Therefore achieving what you are asking for is a bit more difficult.
In my experience, the "cleanest" way that doesn't use :first-child
/:last-child
and works without any modification on flex-wrap:wrap
is to set padding:5px
on the container and margin:5px
on the children. That will produce a 10px
gap between each child and between each child and their parent.
Demo
.upper {
margin: 30px;
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border: 1px red solid;
padding: 5px; /* this */
}
.upper > div {
flex: 1 1 auto;
border: 1px red solid;
text-align: center;
margin: 5px; /* and that, will result in a 10px gap */
}
.upper.mc /* multicol test */ {
flex-direction: column;
flex-wrap: wrap;
width: 200px;
height: 200px;
}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
Areas covered by Flexbox which are difficult or impossible to achieve with Grid
Advantage Flexbox
Here are 13 areas where flexbox comes out ahead of Grid (Level 1):
Centering wrapped items. Imagine five elements. Only four per row. The fifth one wraps. In a flex container, that fifth one can be easily aligned across the entire row with
justify-content
. Try centering this fifth item in a grid container. Not a simple matter.Aligning grid items across the entire row/column (like flex items can)
How to center elements on the last row in CSS Grid?
How to offset a grid item, also shifting its siblings?
Can I have a varying number of columns per row in a CSS grid?
Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.
- How to get grid items of different lengths to wrap?
- Can grid items wrap?
Auto margins. Flex items can be placed, packed and spaced away throughout their container with
auto
margins. Grid items, however, are confined to their tracks, greatly diminishing the utility ofauto
margins.- Can auto margins work in CSS Grid like they do in Flexbox?
Min, Max, Default – all in one. Setting the
min-width
,max-width
and defaultwidth
of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.- Setting the minimum, maximum and default length of a grid column / row
- Set minimum and maximum widths to grid column using percentages (related, but not exactly the same problem)
Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.
- How can I have a sticky footer with my CSS Grid layout?
Consuming remaining space. A flex item can consume remaining space with
flex-grow
. Grid items have no such function.Aligning grid items across the entire row/column (like flex items can)
Make grid item use remaining space like flex item with flex-grow: 1
How to make the items in the last row consume remaining space in CSS Grid?
How to make CSS Grid last row to take up remaining space
Hiding a left column in CSS Grid
How to get the effect of grid layout's grid-template-columns with a variable number of columns?
CSS fr / fractional units minimum too large
Shrinking. Flex has
flex-shrink
. Grid has... nothing.- Shrink grid items just like flex items in css
Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such
repeat()
,auto-fill
andminmax()
, it can't be done.Make CSS Grid auto-fill only 2 columns
CSS grid - maximum number of columns without media queries
Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.
- Add space before and after first and last grid items
An important benefit of the inline-level container is lost in some cases. If you have a Grid layout with a dynamic number of columns – meaning you cannot set the number of columns or a width for the container – then
display: inline-grid
doesn't work. All items stack in a single column. This is because the default setting ongrid-auto-columns
is one column. In at least some cases, flexbox fixes the problem.- How to make a grid container shrink to fit the content?
Getting columns with author-defined grid areas to wrap without media queries. Let's say you have a two-column grid containing grid areas that have set locations, and want the grid to automatically transition to a single column (with the second column wrapping below the first) on smaller screens. With grid, you would need a media query. The
auto-fill
andauto-fit
functions will not work because the locations of grid areas have been specified. If you want to avoid a media query, flexbox'sflex-wrap
function may be useful.- Two-Column grid should wrap into One-Column grid
There is no
column-reverse
function in CSS Grid. Getting items to populate a container starting from the bottom isn't possible with a single rule applied to the grid container. With flexbox, however, the task is simple withflex-direction: column-reverse
.Filling cells starting from the bottom in CSS Grid
https://stackoverflow.com/q/67620185/3597276
The
resize
property on a grid item has no effect on the track. Unless a column or row track is set toauto
(content-based sizing), resizing a grid item will overflow the track. Since flexbox doesn't have column and row tracks, it may be a useful alternative.- Resize property on grid items results in overlap of other grid items
Using margin on flex items
You need to do it with padding - which, when in border-box
mode does not make the container larger than it's specified width - not margin, and a nested flex
div. This is how all flexbox-based grid systems work. Code below:
.flex-container{
border: 1px solid red;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
width: 320px;
}
.flex-item{
padding:1em;
box-sizing: border-box;
height: 160px;
width: 50%;
display:flex;
}
.flex-item>div {
border: 1px solid blue;
flex: 1 1 auto;
}
<div class="flex-container">
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
<div class="flex-item"><div></div></div>
</div>
Related Topics
Percentage Height Not Working in Nested Flexbox Layout in Chrome
Bootstrap Carousel Indicators Are Square; I Want Them Round
Different Colors in Placeholder
How to Change a CSS Property Dynamically in Angularjs
What Characters Must Be Escaped in an Http Query String
Change the Column Order in a CSS Grid
How to Make Responsive Website for All Devices
How to Add Background Image for Input Type="Button"
Change Background Image Opacity
How to Make a Border Overlay Child Div
Why Is There Vertical Scroll on the Main Container
Bash Script to Convert from HTML Entities to Characters
Use Different @Keyframes Based on Parent Element Class
Pre Code Blocks Stretch the Content Beyond Screen Width in a Centered Flex Container
HTML CSS Positions Not Working