on
Amazon
- Get link
- Google+
- Other Apps
When I was trying to make a grid view on my webpage to display my previous projects, I ran into a problem with displaying the boxes the way I wanted them to be by using flex boxes.
The last row of the grid can't align properly to the left when it has fewer items compared to the rows above.
What I got:
The css that I had was:
On stackoverflow, I found these issue:
Targeting flex items on the last row - This thread lists down a lot of similar questions.
How to align left last row/line in multiple line flexbox
Flex-box: Align last row to grid
For example, the following template represents 3 rows.
Then, you can use it like following and they will be arranged according to the template and specified dimension.
You can learn more about display grid via this Grid by example video available on MDN.
You can also see more examples of how it can be used on MDN Grid template areas page.
Thank you for reading!
Jun
The last row of the grid can't align properly to the left when it has fewer items compared to the rows above.
What I wanted:
 |
| Display grid |
What I got:
 |
| Display flex with justify-content center |
asdasd
 |
| Display flex with justify-content flex-start |
The css that I had was:
display: 'flex',
flex-direction: ‘column',
justify-content: ‘flex-start’,
flex-wrap: ‘wrap’,
alignItems: ‘center'
Targeting flex items on the last row - This thread lists down a lot of similar questions.
How to align left last row/line in multiple line flexbox
Flex-box: Align last row to grid
The solution is using CSS display grid.
Display Grid
Refer to MDN document for more detailed information
You can also play around with this grid example codepen which was posted on stackoverflow.
By using display grid, I was able to achieve the following layout:
You can also play around with this grid example codepen which was posted on stackoverflow.
By using display grid, I was able to achieve the following layout:
 |
| Display grid |
The CSS that I have for the above screenshot. This is styled-component way of writing CSS.
display: grid
grid-gap: gap area between each grid item
grid-template-columns: a template telling grid how to arrange the grid items
display: grid
grid-gap: gap area between each grid item
grid-template-columns: a template telling grid how to arrange the grid items
Grid template columns
export const ProjectContainer = styled.div`
display: grid;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, 300px);
width: 1100px;
min-height: 30vh;
margin: 3vh auto;
${media.larger`
grid-template-columns: repeat(auto-fit, 250px);
width: 90vw;
`}
${media.desktop`
grid-template-columns: repeat(auto-fit, 220px);
width: 90vw;
`}
${media.tablet`
grid-template-columns: repeat(auto-fit, 170px);
width: 90vw;
`}
${media.phone`
grid-template-columns: repeat(auto-fit, 300px);
grid-gap: 0px 0px;
`}
Grid Template Areas
There is various ways of using display grid. One rather special way is using template area. You can set a template using character grid. The same character group represents one section on the grid.For example, the following template represents 3 rows.
grid-template-areas: "a a a"
"b b b"
"c c c";
Then, you can use it like following and they will be arranged according to the template and specified dimension.
#headerContainer {
display: grid;
width: 90vw;
height: 300px;
grid-template-columns: repeat(auto-fit, 100px);
grid-auto-rows: 100px;
grid-template-columns: repeat(auto-fit, 100px);
grid-auto-rows: 100px;
grid-template-areas: "a a a"
"b b b"
"c c c";
}
#header {
background-color: tomato;
grid-area: a;
}
#nav {
background-color: green;
grid-area: b;
}
#title {
background-color: red;
grid-area: c;
}
You can learn more about display grid via this Grid by example video available on MDN.
You can also see more examples of how it can be used on MDN Grid template areas page.
Thank you for reading!
Jun