How to center elements on the last row in CSS Grid?

html

responsive-design

css-grid

flexbox

byNikita Barsukov·Jan 14, 2025

To center the last row in a CSS Grid, you're going to engage in a bit of trickery by leveraging a pseudo-element with grid-column: 1 / -1;. This role player creates an invisible 'buffer', pushing the actual last row items to the center when they are less than the total number of columns:

.grid-container::after {
  content: '';
  grid-column: 1 / -1; /* Invisible buffer on the stage */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Our three main characters */
}

.grid-item:last-child {
  justify-self: center; /* A diva, who demands center-stage */
}

<div class="grid-container">
  <!-- ... auditions for other grid items ... -->
  <div class="grid-item">Last</div> <!-- Our diva enters the stage -->
</div>

This trick ensures the last row is centered, regardless of the size of the troupe.

Flexbox: An alternative approach

Flexing with the last row

Although CSS Grid commands powerful 2D layout control, you'll find flexbox yields more granular control over alignment. By applying justify-content: center and flex-wrap: wrap, the last row of items becomes the star of the show. Plus, you get a free ticket to responsivity land.

Space management with margins and calc()

Sometimes items like to keep their distance, just like us during flu season. Enter flex: 0 0 calc(16.66% - 20px). With this sleight of hand, you'll see a neat space between items, while maintaining equal widths. Throw in a box-sizing: border-box and your padding and borders are included in the party.

Styling the orphans

Seriously, who leaves items in the last row without a family? As considerate developers, we use pseudo-selectors like :nth-child and :nth-last-child to give some love (styles) to the orphan items in the last row. This helps in aligning these items to the center of their world.

A toast to Responsiveness

With Flexbox, not having a width property for child items is the new cool. Touche, responsiveness! In contrast, CSS Grid defines columns and rows based on viewport size or content. So swap your hats based on the hats your design wears!

Showdown: Grid vs Flexbox

Imagine sharing pizza among friends. You want everyone to get an even slice, right? (Except if you're Joey from Friends!) Well, that's where Flex-grow comes in. It allows child elements to take up any extra space and evenly distribute it, yielding a visually balanced layout.

The width vs. flex-basis saga

Remember the wise old owl's question - "How much width does a child occupy?" With flexbox, the flex-basis property is your crib sheet that adjusts width based on the container's size, including any defined margins.

Box-sizing: The unsung hero

Just like the pancakes in a breakfast, padding in web layouts is essential for a balanced meal! Using box-sizing: border-box ensures your padding, borders, and content fit snugly within the defined width of the element, making for some delicious web layouts!

Finessing the layout

Flexbox: The simple path

While preparing your morning coffee, do you start with the beans or the cup? That's right, flexbox! It's your go-to method for centering items on the last row, thanks to its straightforward properties (justify-content and align-items).

Margins for personal space

Items on a row are like introverts at a party, they need their personal space. When using flexbox, utilize margins for space separation between items.

Uniformity across rows

Whether it's building a house of cards or a webpage layout, uniformity is key. Ensure the styling rows fall in line, whether they are lounging luxuriously across the entire row or fitting snugly in the last row.

explain-codes / Html / How to center elements on the last row in CSS Grid?

Linked

Two inline-block elements, each 50% wide, do not fit side by side in a single row



When flexbox items wrap in column mode, container does not grow its width



Align an element to bottom with flexbox



Giving wrapped flexbox items vertical spacing



How to align flexbox columns left and right?

