This question already has answers here:
How to center elements on the last row in CSS Grid?
(8 answers)
Closed last year.
I have a CSS Grid like this, and I want to be able to center the child elements horizontally. For example, in this pic, I want to see "Queen" come in the center and not at the left side.
Trying with align-items: center and justify-content: center does not work. What do I do?
This is my CSS (scss) for the grid (parent):
display: grid;
gap: 1rem 0;
grid-template-columns: 1fr;
--node-min-width: 235px;
#media (min-width: 576px){
grid-template-columns: repeat(auto-fit, minmax(var(--node-min-width), 1fr));
}
with a flex container you can play with flex property on item to manipulate their size
here is the minimal code to have a similar situation working
.element {
background:darkgrey;
color:white;
text-align:center;
margin-top: 12px;
flex:0 0 25%;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content:center;
}
<div class="grid">
<div class="element">rook</div>
<div class="element">bishop</div>
<div class="element">knight</div>
<div class="element">king</div>
<div class="element">queen</div>
</div>
Related
I am trying to understand how CSS grids work. I've tried to make an example of a store item as practice, but I am at a loss.
Here's my how my CSS currently looks. Cut off at the top, weird spacing, and the right side is not coming together at all.
How's how it would ideally look
Here is my current CSS, I hope someone can help explain where I am misunderstanding the use of
CSS grids.
.store-currency {
height: 3vh;
}
.item {
display: flex;
align-items: center;
grid-row: 1 / span 2;
}
.currency {
display: flex;
align-items: center;
}
#num-bought-item0 {
display: flex;
align-items: center;
justify-content: right;
margin-right: 10px;
grid-column: 1 / span 2;
}
.store-item {
height: 15vh;
width: 100%;
display: grid;
grid-template-columns: 2fr;
grid-template-rows: 1fr 1fr;
font-size: 24px;
color: white;
border: 5px white solid;
justify-content: left;
align-items: center;
}
.store-item img {
margin: 10px;
height: 8vh;
}
.store-container {
display: flex;
height: 100%;
width: 30vw;
z-index: 0;
background-color: saddlebrown;
left: 0;
position: absolute;
text-align: center;
}
HTML:
<div class="store-container">
<div class="store-item" id="item0">
<div class ="item">
<img src="dumbell.png" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item0">
<span>Owned</span>
<span id="count-item0">0</span>
</div>
<div class="currency">
<img class="store-currency" src="coin.png" alt="">
<span>100000</span>
</div>
</div>
you did the first steps.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
.store-container {
display: grid | inline-grid;
}
grid – generates a block-level grid
inline-grid – generates an inline-level grid
With grid-template-columns you can define how many columns will appear in your layout.
P.S Fr unit is a fractional unit and 1fr is for 1 part of the available space. In this example each column would take ~ 25% from the available space.
.container {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
For your task, you can use grid-template-areas feature.
The grid-template-areas CSS property specifies named grid areas,
establishing the cells in the grid and assigning them names.
For example:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
This will generates something like that in modern browsers:
If you need more examples, take a look here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
https://css-tricks.com/snippets/css/complete-guide-grid/
Some of the examples are taken from the second site.
It looks like you are mixing flex and grid properties. grid-row and grid-column are only avalaible for a grid display (2D), not a flex display (1D).
You can try to play around with flex (worse choice since it is drawing a 1D layout) , you can use grid , which is made for this kind of layout.
Here a couple example with flex and grid
/* GRID make it simple*/
.grid {display:grid;}
#num-bought-item2 {grid-row:1/3;grid-column:2;}
#num-bought-item2 {display:grid;margin:auto;text-align:center}
/* layout done */
/* some reset for the demo*/
*{box-sizing:border-box;}
.store-container {display:grid;justify-content:center;}
.store-item {border:solid;}
.store-item>div {padding:0.5em;}
img{vertical-align:middle;}
[src="https://dummyimage.com/25/ff0"]{border-radius:50%}
big{color:darkgreen;background:lightyellow;}
/* FLEX make it a mess */
.flex {display:flex}
.column {flex-flow:column wrap;height:120px;}/* here an height is to be set so it wraps*/
/* since it is not made for this, we need to mess around */
.flex #num-bought-item1{order:2}/* reorder item */
.flex .item {height:0;min-height:60%;}/* hide it, then show it */
.flex .currency {height:0;min-height:40%;}/* hide it, then show it */
.flex #num-bought-item1{display:flex;flex-direction:column;justify-content:center;text-align:center;margin:auto;}
/* and flex did not do it */
<p>Let's try via flex</p>
<div class="store-container">
<div class="store-item flex column" id="item1">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item1" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
<p>And via <big>grid</big> </p>
<div class="store-container">
<div class="store-item grid" id="item2">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item2" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed last year.
I don't know what silliness I've got myself into but I'm stuck in a common flexbox issue..
Here's a pen.. https://codepen.io/webdev51/pen/zYPWwbd
What I'm trying to achieve is the parent flex div to be adapting the width when flex item go into 2nd row using flex-wrap.
Desired/expected result:
Results I get:
And here's the most important part that is driving me nuts.
If I replicate the same in flex-direction: row; , it'll be working as expected and whenever the items drop in the next row, the container will adapt the height accordingly.
after changing display: inline-flex to display: flex, add align-content: flex-start;
.spaceship-group{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 90vh;
align-content: flex-start;
justify-content: center;
position: relative;
border:2px solid orange;
}
.spaceship {
height: 240px;
width: 290px;
position: relative;
border:1px solid blue;
}
<div class="spaceship-group">
<div class="spaceship"></div>
<div class="spaceship"></div>
<div class="spaceship"></div>
<div class="spaceship"></div>
<div class="spaceship"></div>
</div>
On a wide-enough viewport the content of the 'flex-container' element - 'George Zuberi' - stays horizontally-centred thanks to justify-content: center;. However when you narrow the viewport a lot it fails. It needs text-align: center; to still stay horizontally-centred. Why is this?
.grid-container {
display: grid;
height: 100px;
grid-template-columns: 1fr 1fr 1fr;
background-color: #ECF0DE;
}
.flex-container {
/* text-align: center; */
color: #BD6EB6;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
<header class="grid-container">
<div class="flex-container">
George Zuberi
</div>
</header>
If you wrap the contents of the flex container with any html element, for example, span, then you will easily understand what's happening here.
Contents of the flex container are actually centered within the flex container but when screen is small enough that the text George Zuberi cannot fit in one line, it wraps and that's when it seems that the contents of the flex container are not centered.
As you can see in the example below, justify-content: center applies on the span element (yellow color) which is why it is centered within the flex container (red color) but text inside the span element isn't centered.
If you want the text inside the span element to also be centered, then add text-align: center on span element.
You can use justify-content to center anything within a flex container and your text is indeed centered within flex-container. Add background color to flex-container to understand things better.
As a tip, instead of writing text directly within the flex-container, wrap the text within any html element.
.grid-container {
display: grid;
height: 100px;
grid-template-columns: 1fr 1fr 1fr;
background-color: #ECF0DE;
}
.flex-container {
background: red;
color: #BD6EB6;
display: flex;
justify-content: center;
align-items: center;
}
span {
width: 80%;
background: yellow;
}
<header class="grid-container">
<div class="flex-container">
<span>George Zuberi</span>
</div>
</header>
The reason lies in the .grid-container: You have to limit it to one column (which will then fill the parent and which will also cause the flex-container to be full width, in which again the centering will work as expected:
Addition after some comments: The contents of the flex-container are centered insinde the flex-container as desired. The reason why the text isn't appearing in the middle of the page or of the outer container is that the outer container consists of three grid-columns, which are not apparently visible in this example.
.grid-container {
display: grid;
height: 100px;
grid-template-columns: 1fr;
background-color: #ECF0DE;
}
.flex-container {
/* text-align: center; */
color: #BD6EB6;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
<header class="grid-container">
<div class="flex-container">
George Zuberi
</div>
</header>
i don't know if i'm right because i never use grid so i could be wrong, but from what i can see is that you create 3 rows in the grid by using 1fr 1fr 1fr wich means give every row 33% room. in your 33% room you say center my text. so when you reduce your screen-size your 33% percent gets cropped up and automatically goes more to the left, but because you said it has to be centered in that 33% space it moves with the space when it gets reduced to stay centered at the middle, does this make sense?
I am using grid to display 4 columns, but for some reason I can't use justify-content: space-between on them.
Example code:
<div class"wrapper">
<div class"columns">
<div class"column1"></div>
<div class"column2"></div>
<div class"column3"></div>
<div class"column4"></div>
</div>
</div>
.wrapper {
max-width: 1200px;
width: 90%;
margin: 0 auto;
}
.columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: space-between;
}
What am I achieving right now:
RIGHT NOW
What I want to achieve:
ACHIEVMENT
! Pay attention: 1) Displaying items as flex and justify space between is not a solution for me, because I want to use grid.
2) Giving columns grid-gap is also not a solution for me.
Thanks for your help in advance!
I have two columns. The first column contains several items. I want the last item to be vertically centered in the remaining empty space.
For example, if the left column was 4 inches high, contained 3 items, and the first two items were taking up the top 2 inches, then the last item would be vertically centered in the bottom two inches.
To do this, I am trying to use FlexBox for the first time and failing miserably. I am able to vertically center the whole left column (if I put align-items: center; under .row), but I cannot get it to work by putting align-items: center; under .lastitem.
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.lastitem{
align-items: center;
}
Any help is much appreciated.
Added: I'm sorry, I'm not sure how to just share the relevant code. Here is a link to the test page in question: njfilmschool.com/homenew4.php All I'm trying to do it make it so the "Laurel Image" is centered vertically below the Instagram feed and above the footer line. But because the page is generated dynamically that empty space changes size. It seems like FlexBox should let me do this, but what I'm doing is having no effect on the image.
I can suggest you a flexbox solution if you are ready to show the whole code. Probably you are missing display: flex on the .lastitem and hence the align-items: center is not being rendered by the DOM.
At this moment, I have a nested CSS Grid solution below:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 2fr; /* One inch - One Inch - Two Inch Inches are fractions here*/
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #6A67CE;
padding: 15px;
}
.div1 {
grid-area: 1 / 1 / 2 / 2; /* Start at Row1, end at Row2, Start at Col1. end at Col2 */
}
.div2 {
grid-area: 2 / 1 / 3 / 2;
}
.div3 {
grid-area: 3 / 1 / 4 / 2;
display: grid;
/* Nested Grid */
align-items: center;
}
/* Snippet styling */
.container > div {
background: #5548B0;
text-align: center;
color: #fff;
font-size: 36px;
padding: 15px;
}
<div class="container">
<div class="div1"> 1 </div>
<div class="div2"> 2 </div>
<div class="div3"> 3 </div>
</div>