This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 1 year ago.
How can I center a grid column? This is my current code
.example-grid {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}
However, all the grid items are aligned to the left.
section {
width: 400px;
height: 400px;
border:1px solid #ccc;
display: grid;
justify-content: center;
align-content: center;
gap: 4px;
grid-auto-flow: column;
}
div{
background:#777;
color:#fff;
padding: 30px;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
Instead of align-items: center;, you have to use align-content: center;.
Everything else looks fine :)
align-items property is a Flexbox property not a CSS-Grid property
Your display property must be inline-grid instead of grid.
Related
Consider the following HTML code:
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending </div>
</div>
</div>
with the following css:
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
}
.indicator-container .indicator {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
padding: 0 10px;
border: 1px solid #2e2240;
}
The design I am aiming for, is:
to let the outermost flex containers (.ungrouped-ordered-item) children, grow as they need, and leave space between them, so that they are aligned to the left and right respectively of their containers
to make the children of the inner flex container (.indicator-container .indicator) be equal-width, by taking up the width of the wider element (in this case, it being the element with the text "Pending")
My first goal is achieved, but it seems, that even if adding flex: 1 to the .indicator containers, the browser will not correctly calculate the width of the two elements, and they will have uneven widths. I am presuming that this is because that their container, .indicator-container, has a fluid width. Am I right in this? How can I achieve my desired effect with all fluid width containers? (preferably without javascript).
Here's a fiddle also!
What is the argument against a width:50% for the .indicatorbox?
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.indicator-container > * {
border: 1px solid #2e2240;
padding: 0 10px;
flex-wrap: wrap;
}
.indicator-container .indicator {
width: 50%;
text-align: center;
}
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending long long</div>
</div>
</div>
Changing the .indicator-container class from flex to grid and using automatic columns solves my problem. Although, it doesn't have as much coverage as flex, for my needs, this works:
.indicator-container {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
Here's the updated fiddle also.
I'm using flex box to make a layout for my products list but when I try to set justify-content to be space-between it works well on 4 items scenario but for less items (2 or 3) the space between them grows so how I set the space between items to be the same regardless the number of items in the row?
.productsContainer {
background-color: $color_1;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
flex-basis: 23%;
border: 1px solid $color_2;
display: flex;
flex-direction: column;
padding: 10px 15px;
margin-bottom: 20px;
}
Screenshot
justify-content: space-between;
will divide the remaining container space into equal width chunks between your elements, you can not set the spacing.
I would recommend trying the grid layout for this kind of card placement.
Something like this should do it:
.productsContainer {
background-color: $color_1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 15px;
}
Change to:
justify-content: center;
and add gap property:
gap: 10px;
and play with the gap.
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Single-row grid with height 1fr not filling height in Chrome
(1 answer)
Closed 3 years ago.
I am trying to see if it is possible to grow the height of a grid to fill the height of a parent container.
What I've tried:
I've tried setting 100% height/min-height on the grid container and child divs.
100vh isn't the solution as that will not be dynamic.
I'm a bit stuck on how to do this and if it is possible.
Any help with this is much appreciated. Thanks!
I've created a CodePen to try to figure this out here:
https://codepen.io/fylzero/pen/bGGvBPa
HTML
<div class="flex">
<div class="grid">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>
</div>
CSS
html, body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
}
.flex {
display: flex;
padding: 10px;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
outline: 1px solid red;
}
.grid {
display: grid;
padding: 10px;
height: 100%; /* THIS DOESN'T DO IT */
grid-template-columns: 1fr minmax(auto, 400px) minmax(auto, 800px) 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
outline: 1px solid green;
}
.grid div {
padding: 10px;
outline: 1px solid blue;
}
This question already has answers here:
CSS3 box-sizing property
(5 answers)
Closed 4 years ago.
I know this question has been asked several times and the solution is flex-wrap: wrap but for some reason this doesnt work in my code.
Could anyone briefly help me why my divs aren't wrapping?
I basically need always 2 divs next to eachother in a row and then to wrap.
JSFIDDLE: enter link description here
.wrapper {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
flex-wrap: wrap;
}
.box {
flex: 50%;
text-align: center;
padding-bottom: 10px;
color: #8988DB;
flex-wrap: wrap;
border: 1px solid black;
}
<div class="wrapper">
<div class="box"><br>Valerian Root</div>
<div class="box"><br>Lavender</div>
<div class="box"><br>Lemon Balm</div>
<div class="box"><br>Chamomile</div>
<div class="box"><br>Passion Flower</div>
<div class="box"><br>Hops</div>
<div class="box"><br>Rooibos</div>
<div class="box"><br>Cinnamon</div>
</div>
Thanks so much!
Alpha
As a note, in the CSS rule for the flex container, place the regular display: flex property after all the prefix-versions.
For it to work also in IE11, use width: 50% instead of flex: 50%, combined with box-sizing: border-box, where borders/padding gets included in the set width.
.wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
flex-wrap: wrap;
}
.box {
box-sizing: border-box;
width: 50%;
padding: 0 30px 10px;
text-align: center;
color: #8988DB;
border: 1px solid black;
}
<div class="wrapper">
<div class="box"><br>Valerian Root</div>
<div class="box"><br>Lavender</div>
<div class="box"><br>Lemon Balm</div>
<div class="box"><br>Chamomile</div>
<div class="box"><br>Passion Flower</div>
<div class="box"><br>Hops</div>
<div class="box"><br>Rooibos</div>
<div class="box"><br>Cinnamon</div>
</div>
Step into CSS Grid, it's ideal for this use case. Your use case is so simple, you only need three lines of CSS to pull it off.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr; // creates two responsive columns
grid-gap: 10px; // puts 10px between each node in the grid
}
Looks like all you need is a proper CSS reset, specifically, the box-sizing property so that borders are not included in the width calculations.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 50%;
text-align: center;
padding-bottom: 10px;
color: #8988DB;
border: 1px solid black;
}
<div class="wrapper">
<div class="box"><br>Valerian Root</div>
<div class="box"><br>Lavender</div>
<div class="box"><br>Lemon Balm</div>
<div class="box"><br>Chamomile</div>
<div class="box"><br>Passion Flower</div>
<div class="box"><br>Hops</div>
<div class="box"><br>Rooibos</div>
<div class="box"><br>Cinnamon</div>
</div>
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 5 years ago.
I have made a simple flexbox jsfiddle To play around with all flexbox values, but stumbled upon something that I can't explain my .item divs are spaced out for some reason and .grid is automatically stretching to full height, I'm not entirely sure why this happens?
HTML
<div class="container">
<div class="grid">
<div class="item red">a</div>
<div class="item yellow">b</div>
<div class="item blue">c</div>
</div>
</div>
CSS
.container {
width: 320px;
height: 480px;
background: black;
padding:15px;
margin: 20px auto;
display: flex;
}
.grid {
background: white;
display: flex;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 100%;
flex-grow: 0;
flex-basis: 100%;
align-self: auto;
align-items: flex-start;
padding: 10px 0;
}
.red { background: red; }
.yellow { background: yellow; }
.blue { background: blue; }
The align-items: flex-start (set on .grid) causes this type of behavior. As specified in the MDN docs
The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container.
If you disable it, the value will be set to stretch by default (each flex item will be stretched to fill the container).