This question already has answers here:
Aligning grid items across the entire row/column (like flex items can)
(3 answers)
What is difference between justify-self, justify-items and justify-content in CSS grid?
(4 answers)
Centering in CSS Grid
(9 answers)
Closed 4 years ago.
I am using CSS grid for some box items. This looks good and fine but however when I make the screen smaller when there are only 2 or 1 boxes in the container its to the left how would I go about making them always in the center?
body {
background-color: #8268EE;
}
.item-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
justify-content: center;
align-items: center;
}
.item {
background-color: #BDD3FB;
width: 200px;
height: 200px;
}
<div class='item-container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
Almost there, use the justify-items property instead of justify-content:
body {
background-color: #8268EE;
}
.item-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
align-items: center;
justify-items: center;
}
.item {
background-color: #BDD3FB;
width: 200px;
height: 200px;
}
<div class='item-container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
Actually silly me I've figured it out. All it took was justify-self: center; on the child item and it worked! I had thought when the documentation was talking about it that it was referring to the flex item inside. Then I though oh wait? You can't justify-self a flex parent that not in a flex!
Related
My scenario
I have these two flex containers (the difficulty options and the max-score options):
I want the 'easy', 'medium' and 'hard' button to share the same width, but also to fit they're content (in this case, because 'medium' is the longest, they should all equal its width).
I want the same behavior with the bottom buttons (but for them to have a smaller width since they need to accommodate for smaller content).
Right now the flex containers for both of them is set to:
display: flex;
flex-direction: wrap;
flex-wrap: wrap;
And the flex children are each set to their default flex values, with a set height and an auto width.
Approaches I've tried
First approach - flex-basis and flex-grow
Setting the children to flex-basis: 0 and flex-grow: 1, as I've seen in past questions, but then my wrapped child fills the entire width, and the top buttons aren't the same width:
Second approach - -- hardcoded flex-basis
Setting all children to flex-basis: 90px (90px to accommodate for the biggest button, 'medium') which does make them all the same width, but then the width is fixed and doesn't adjust to only fit the content (specifically this is desired so the score buttons can fit in two rows instead of three).
Third approach - max-width
The closest I've got to is to set the children to:
```
max-width: 90px;
flex-basis: 0;
flex-grow: 1;
```
Which makes them behave as wanted:
But when the screen width shrinks, the buttons start to differ in width (the obvious one is the '200' button bigger than the other scores, but also 'medium' is bigger than 'easy' and 'hard'):
My code:
.flex-col,
.flex-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.button {
border-style: solid;
padding: 4px;
}
.parent {
height: auto;
width: auto;
}
<div class="parent flex-col">
<div class="flex-col">
<div class="flex-row">
DIFFICULTY
</div>
<div class="flex-row">
<div class="button">EASY</div>
<div class="button">MEDIUM</div>
<div class="button">HARD</div>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
MAX SCORE
</div>
<div class="flex-row">
<div class="button">50</div>
<div class="button">75</div>
<div class="button">100</div>
<div class="button">150</div>
<div class="button">200</div>
</div>
</div>
</div>
Help appreciated, thanks!
The closest way to do this with CSS only, is to use a grid instead of a flexbox for reasons well explained here.
The only way to truly do what you are asking (make all children have the same width as the widest child), is with JavaScript. Loop through the elements to find the biggest width and set them all to have the found width.
Here is a snippet demonstrating both concepts:
const equalizers = document.querySelectorAll('.equalize')
let r = 0
equalizers.forEach(equalizer => {
const widths = []
for (const btn of equalizer.children) {
const w = btn.getBoundingClientRect().width
// Math.ceil() is optional to avoid long floats
widths.push(Math.ceil(w)) // 82
// widths.push(w) // 81.31945037841797
}
const biggest = Math.max(...widths)
console.log(`biggest width found in row[${r++}]:`, biggest)
for (const btn of equalizer.children) {
btn.style.width = `${biggest}px`
}
})
.flex-col,
.flex-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.button {
border-style: solid;
padding: 4px;
}
.parent {
height: auto;
width: auto;
}
.grid-row {
display: grid;
gap: 4px;
}
.grid-row>* {
text-align: center;
}
#media (min-width: 25em) {
.grid-row {
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
}
.flex-row>* {
text-align: center;
}
<hr>
<strong>JavaScript</strong> (only ever as wide as the widest sibling, with wrapping)
<hr>
<div class="parent flex-col">
<div class="flex-col">
<div class="flex-row">
DIFFICULTY
</div>
<div class="flex-row equalize">
<div class="button">EASY</div>
<div class="button">MEDIUM</div>
<div class="button">HARD</div>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
MAX SCORE
</div>
<div class="flex-row equalize">
<div class="button">50</div>
<div class="button">75</div>
<div class="button">100</div>
<div class="button">150</div>
<div class="button">200</div>
</div>
</div>
</div>
<hr>
<strong>Grid</strong> (always as wide as posible and no wrapping, either all stacked, or all inline with breakpoint)
<hr>
<div class="parent flex-col">
<div class="flex-col">
<div class="flex-row">
DIFFICULTY
</div>
<div class="grid-row">
<div class="button">EASY</div>
<div class="button">MEDIUM</div>
<div class="button">HARD</div>
</div>
</div>
<div class="flex-col">
<div class="flex-row">
MAX SCORE
</div>
<div class="grid-row">
<div class="button">50</div>
<div class="button">75</div>
<div class="button">100</div>
<div class="button">150</div>
<div class="button">200</div>
</div>
</div>
</div>
Background
I am trying to build a page with main section containing a dynamic grid in between a header and footer. As users use the page, book shaped .grid-item divs are appended to the .grid. Initially, when the .grid is empty, I want the <main> to expand to fill the page space so the footer isn't floating half way up the page. As the grid grows beyond the confines of this space, I want the page to grow vertically so that it scrolls.
Book shape
By book shaped, I mean that the column should be 2/3 the size of the height for each grid item.
Problem
The problem is that only the columns of the grid are behaving as intended with the items equally sized. In the row direction, only the first row is working as intended and the following rows are only the height of the content. As a result, they are no longer book shaped.
Solutions tried
I added flex: 1 to the <main> so that it can grow as needed. I also used grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); so that it would auto-fill the grid with equally sized rows.
Following this, I tried to auto-fill the grid with static sized columns and rows:
grid-template-columns: repeat(auto-fill, 200px);
grid-template-rows: repeat(auto-fill, 300px);
After this, I did some reading on the repeat() function and auto-fill to see where my misunderstanding is. I also searched stack-overflow for similar issues and attempted some mentioned solutions like changing my flex-grow and flex-basis for the <main> but I could not resolve the issue.
Closest Solution
I found that if I change the rows explicitly instead of using auto-fill, then the rows work as intended.
grid-template-rows: repeat(12, minmax(250px, 1fr));
This would however require for me to use javascript to change the styling of the .grid as I append children. This solution doesn't work because if the page width changes so that there are fewer columns, the rows would increase automatically, so it would add a lot of extra work to calculate the required rows using javascript before changing the styling. For this reason, I am ideally looking for a CSS only solution.
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
header, footer {
height: 40px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: grey;
width: 100%;
}
.grid {
display: grid;
width: 60vw;
margin: 5px var(--margin-size) 5px var(--margin-size);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
}
.grid-item {
background-color: red;
}
<body>
<header>
Header
</header>
<main>
<div class="grid">
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
</div>
</main>
<footer>
Footer
</footer>
<body>
My question is how can I make the grid grow beyond the confines of the screen while retaining the book shape of the grid children?
I was able to get it working as intended with:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(300px, 1fr);
Working snippet below:
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
header, footer {
height: 40px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: grey;
width: 100%;
}
.grid {
display: grid;
width: 60vw;
margin: 5px var(--margin-size) 5px var(--margin-size);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(300px, 1fr);
gap: 10px;
}
.grid-item {
background-color: red;
}
<body>
<header>
Header
</header>
<main>
<div class="grid">
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
<div class="grid-item">
Grid Item
</div>
</div>
</main>
<footer>
Footer
</footer>
<body>
Is it possible with CSS3 grid to create such a layout?
All of the elements should be as wide as their content. And the last two elements should be right-aligned.
However, the way I've tried does not work. As soon as a column has min-content, the justify-self property doesn't do anything.
.grid {
display: grid;
grid-template-areas: "first second third";
grid-template-columns: min-content min-content min-content;
}
.first {
grid-area: first;
}
.second {
grid-area: second;
justify-self: right; /* doesn't work */
}
.third {
grid-area: third; /* doesn't work */
}
<div class="grid">
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
</div>
This is only a downsized version of a much more complex layout, therefore:
I'm not looking for workarounds like creating wrappers
Stretching .first is not an option because there will be calculations on that element
The reason I chose grid over flex is because of the gaps
Using flexbox may be more appropriate? note the margin-right on the first element in container 1, and margin-left on the second element in container 2. auto margins are quite powerful in flex containers.
.container-1,
.container-2 {
display: flex;
background: lightgray;
}
.item {
width: max-content;
margin: 1em;
padding: 1em;
background: white;
}
.container-1 .item-1 {
margin-right: auto;
}
.container-2 .item-2 {
margin-left: auto;
}
<div class="container-1">
<div class="item item-1">
item 1
</div>
<div class="item item-2">
item 2
</div>
<div class="item item-3">
item 3
</div>
</div>
<div class="container-2">
<div class="item item-1">
item 1
</div>
<div class="item item-2">
item 2
</div>
<div class="item item-3">
item 3
</div>
</div>
I want to make a responsive css grid that looks like this:
box | box | box
b o x | b o x
b o x | b o x
and then when the screen size gets small enough, all of the columns collapse into a single column with each box on its own row.
Is this possible?
Edit:
For anyone who has this issue, changing the number of columns via media query from 6 to 1 was not working. However, I had the idea to make all of the items span 6 columns at the break point and that worked perfectly. This is an addition to the answer given by lawrence-witt and paulie-d.
By using a SIX column grid
.item {
height: 3em;
border: 2px solid green;
}
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 4px;
width: 90%;
margin: 1em auto;
}
.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
grid-column: span 2
}
.item:nth-child(4),
.item:nth-child(5) {
grid-column: span 3;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
After that it's just a matter of adding a media query to collapse the grid to a single column at the appropriate breakpoint,
Here is one way to do it using the nth-child feature. To make the grid responsive you simply add a media query that changes the styling of cells and grid at a certain screen width.
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.cell {
border: 1px solid black;
grid-column: span 3;
}
.cell:nth-child(1),
.cell:nth-child(2),
.cell:nth-child(3){
grid-column: span 2;
}
<div class="grid">
<div class="cell">One</div>
<div class="cell">Two</div>
<div class="cell">Three</div>
<div class="cell">Four</div>
<div class="cell">Five</div>
<div class="cell">Six</div>
<div class="cell">Seven</div>
</div>
By using CSS flex layout and CSS media query you can achieve your need. See the below code, if the screen size reduced to 600px then it will change to single column layout.
.container {
display: flex;
width: 100%;
justify-content: space-between;
flex-direction: row;
margin-bottom: 10px;
}
.three-box-row > div {
width: 33%;
height: 50px;
}
.two-box-row > div {
width: 49%;
height: 50px;
}
#media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.container > div {
width: 100%;
}
}
<body>
<div class="three-box-row container">
<div style="background-color: red;">Box 1</div>
<div style="background-color: green;">Box 2</div>
<div style="background-color: blue;">Box 3</div>
</div>
<div class="two-box-row container">
<div style="background-color: red;">Box 1</div>
<div style="background-color: green;">Box 2</div>
</div>
<div class="two-box-row container">
<div style="background-color: green;">Box 1</div>
<div style="background-color: blue;">Box 2</div>
</div>
</body>
i created .container with some color & in that container header with some other color and text. now i want to center text. i am able to do that with grid but problem is my header color (background color of header) shrink to vertically and horizontally center too. i want only text to get in center not the color. hope i explained clearly. plz explain me how i can achieve that.
(
i am using visual studio. align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion
i need only text in center if i put image or logo that in center. i dont want background image to be compromise and i wanna use grid only.
i tried 6 grid commands align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion.
i am using visual studio. align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
</div>
To center element on the grid and avoid them to shrink, you will need to set again a grid system on your children You can use flex or grid .
examples (might not be your grid, but needed a base that you did not provide, if that does not answer your question then, please, clarify your question)
Flex can be used on the grid children to allow centering alignement.
.container> div {
display:flex;
align-items:center;
justify-content:center;
background:tomato;
border:solid;
}
/* reconstruction of a grid */
.container {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows: minmax(150px,1fr);
grid-gap:1em;
}
.container .header, .container .footer {
background:lightblue;
grid-column:span 4;
}
.small-box-1 {
grid-column:2;
}
.main-content{
grid-column:2 / span 3
}
.side-bar {
grid-column:1;
grid-row:2 / span 2;
}
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
Grid can also be used on the grid children to allow centering alignement.
.container>div {
display: grid;
align-items: center;
justify-content: center;
background: tomato;
border: solid;
}
/* reconstruction of a grid */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, 1fr);
grid-gap: 1em;
}
.container .header,
.container .footer {
background: lightblue;
grid-column: span 4;
}
.small-box-1 {
grid-column: 2;
}
.main-content {
grid-column: 2 / span 3
}
.side-bar {
grid-column: 1;
grid-row: 2 / span 2;
}
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>