Left aligned last row in centered grid of elements
For what it's worth: It's now 2017 and the grid layout module does this out of the box
* { margin:0; padding:0;}
.container { display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 10px; justify-content: center; align-content: flex-start; margin: 0 auto; text-align: center; margin-top: 10px;}.block { background-color: #ddd; border: 1px solid #999; height: 100px; width: 100px;}
<div class="container"> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div> <div class="block">Foo</div></div>
How to center elements on the last row in CSS Grid?
CSS Grid isn't suited for alignment across an entire row because of crisscrossing tracks blocking the way. Here's a detailed explanation:
- Aligning grid items across the entire row/column (like flex items can)
As an alternative, use flexbox with justify-content: center
.
This packs all items in the horizontal center of the row. Then your margins push them apart.
On fully-filled rows, justify-content
will have no effect since there's no free space for it to work.
On rows with free space (in your case, only the last row), the items are centered.
#container { display: flex; flex-wrap: wrap; justify-content: center;}
.item { flex: 0 0 calc(16.66% - 20px); background: teal; color: white; padding: 20px; margin: 10px;}
* { box-sizing: border-box;}
<div id="container"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div></div>
Flex-box: Align last row to grid
Add a ::after
which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}
CSS Flexbox Align Itens 2 itens per rows but last row only one item
You can handle this by assign width to the parent ( not more as two child witds together). Like this
.parent {
display: flex;
flex-wrap: wrap;
padding: 24px 20px;
justify-content: center;
gap: 16px;
width: 350px;
margin: 0 auto;
}
.parent > .card {
height: 220px;
width: 152px;
border: 1px solid black;
}
<div class="parent">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
</div>
Related Topics
Remove White Space Below Image
Transparent Arrow/Triangle Indented Over an Image
Css - How to Overflow from Div to Full Width of Screen
How to Force Webkit to Redraw/Repaint to Propagate Style Changes
Select Every Nth Element in Css
Transparent Text Cut Out of Background
How to Prevent Less from Trying to Compile CSS Calc() Properties
How to Have Multiple Background Images Using Css
Complex CSS Selector For Parent of Active Child
How to Remove the Stripes That Appears When Using Linear Gradient Property
What's So Bad About In-Line Css
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
Css Child VS Descendant Selectors
Make a Scrollbar Always Visible in a Div - Chrome
How to Center Text in Select Box
Spring Boot + Thymeleaf CSS Is Not Applied to Template