10 ninja CSS tips for your flexbox and CSS grid layouts

I got 10 tricks and tips related to CSS flexbox and grid that you might find very useful, well at least some of them, we’ll see.

1. Make grid cell, full width

.parentElement {
   display: grid;
   gap: 5px;
   grid-template-columns: repeat(3, 1fr); 
}
.column1 {
   grid-columns: 1 / -1
}

In a grid layout of 3 columns in a row, I made the first column(column1) span from the beginning till the end of the row.

2. The gap

.parentElement {
   display: flex;
   gap: 15px 5px;
   flex-wrap: wrap;
}

You can set also column-gap and row-gap in the gap property. First the vertical then the horizontal value should be set.

3. Flexbox line break

.parentElement {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
}
.parentElement > div {
   flex-basis: 33.3333%;
}
.column2 {
    margin-right: 33.3333%;
}
//In case you want the first column to line break
.column1 {
   margin-right: 66.6666%;
}

If you want to break a line from a certain column in flexbox, just add a right margin to it with a certain value that covers the empty space, not leaving more space for the next column to fit in.

4. Orphan child should extend to 100%

.parentElement {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
}
.parentElement > div {
   flex: 1 1 calc(33.3333% - 5px);
}

Having 3 column rows with flexbox with distance of 5px between them and applying a flex-grow of 1 will result in last orphan column extending in the available space.

5. Orphan child should be centered

.parentElement {
   display: flex;
   gap: 5px;
   flex-wrap: wrap;
}
.parentElement > div:last-child {
   margin-left: auto;
}
.parentElement > div:last-nth-child(2) {
   margin-right: auto;
}

6. Reverse flexbox list

.parentElement {
   display: flex;
   gap: 5px;
   flex-direction: row-reverse;
   flex-wrap: wrap-reverse;
   flex-wrap: wrap;
}

By using row-reverse with wrap-reverse we can completely reverse our list.

7. The place-items is not working in flexbox

.parentElement {
  display: flex;
  place-items: center
}

Since in flexbox the justify-items, and justify-self is ignored and the place-items is bringing together the justify-items and the align-items, the element will not be aligned horizontally. For this you need to use the old method:

.parentElement {
  display: flex;
  justify-content: center;
  align-items: center;
}

8. Make flex items same size

.parentElement {
  display: flex;
}
.parentElement > div {
   flex-basis: 100%; 
}

You have to first make all items in a row 100% and then the flexbox will adjust them back equally to smaller sizes till all of them fit in the row.

9. Sticky footer

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
   flex-grow: 1;
}

10. Navigation item always on the center

nav {
   display: flex;
   gap: 5px;
}
nav .centerItem {
   margin: 0 auto;
}

Also I will attach the video version here:

0