Plates Size

To start, I added a width and height for the plates.

<div class="c-table">
  <div class="c-plate salmon"></div>
  <div class="c-plate chicken"></div>
  <div class="c-plate steak"></div>
  <div class="c-plate kebab"></div>
</div>

.c-plate {
  width: 96px;
  height: 96px;
}

Since the plates are block elements, each one of them is in its own line.

Flexbox

To start, we should add display: flex to the .table element.

.c-table {
  display: flex;
}

Notice that the plates are next to each other. Since flexbox is a single layout direction, the flex items are either aligned in rows or columns. The default is rows.

The guests requested bigger plates, so we need to increase their width. I added the following CSS.

.c-plate {
  width: 50%;
  height: 96px;
}

The expected behaviour is that each plate have a width of 50% of the table, correct? Why it’s not working?

The reason is because flexbox doesn’t move the plates into a new line when there is no space available in the row.
To fix that, we should useflex-wrap: wrap, it will help in wrapping the plates correctly in case the space is not enough.

.c-table {
  display: flex;
  flex-wrap: wrap;
}

You might be wondering, why there is a space between each row of plates? Well, that’s a good question.

By default, flex items stretch in the cross axis because the default value for the table is align-items: stretch. In our case, the plates has a fixed height. Let’s remove it and see how the result will look.

.c-plate {
  width: 50%;
  height: initial;
}

Flexbox - Align Content

To center the plates on the cross axis, I added align-content: space-evenly and the result looks like the following figure.

.c-table {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

.c-plate {
  width: 50%;
  height: 90px;
}

normal, flex-start, flex-end, center, stretch, space-around, space-between, space-evenly, baseline, first-baseline, last-baseline

Flexbox - Justify Content

The justify-content works on the main axis of the flex container.

.c-table {
  display: flex;
  flex-wrap: wrap;
}

.c-plate {
  width: 90px;
  height: 90px;
}

To have an equal spacing between the plates across the main axis, I added justify-content: space-between. See the result in the following figure.

.c-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.c-plate {
  width: 90px;
  height: 90px;
}

normal, flex-start, flex-end, center, stretch, space-around, space-between, space-evenly, baseline, first-baseline, last-baseline

Flexbox - Align Items/Self

Align Items

By default, align-items works on the cross axis. I added align-items: center to center the plates vertically.

.c-table {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.c-plate {
  width: 90px;
  height: 90px;
}

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

Align Self

Let’s suppose that we have some custom alignment requests from our guests. The first and last plates needs to be aligned differntly. For that purpose, we can use align-self on those flex items.

.salmon {
  align-self: flex-start;
}
.kebab {
  align-self: flex-end;
}

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

CSS Grid - The default

For CSS grid, we have two axes: Inline and block. Those don’t change based on a specific direction

<div class="table">
  <div class="c-plate konafa"></div>
  <div class="c-plate icecream"></div>
  <div class="c-plate donut"></div>
  <div class="c-plate cake"></div>
</div>

.table {
  display: grid;
}

Specify columns and rows

We will have two columns and rows. See the next figure.

.table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Grid - Justify Content

When we have a grid with fixed size columns, this will create an additional space in case the container is bigger than the columns. In that case, we can use justify-content to control the spacing between the columns.

.table {
  display: grid;
  grid-template-columns: 150px 150px;
}

Adding Justify Content

By adding justify-content: space-between, the columns are distributed and the space between them is equal.

.table {
  display: grid;
  grid-template-columns: 150px 150px;
  justify-content: space-between;
}

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

Grid - Align Content

When we have a grid with fixed size rows, this will create an additional space in case the container height is bigger than the rows. In that case, we can use align-content to control the spacing between the rows.

.table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px 150px;
}

Using Align Content

By adding align-content: space-between, the rows are distributed and the space between them is equal.

.table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px 150px;
  align-content: space-between;
}

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline