The bento grid

Technically speaking, we could use our .column-layout class for the Bento grid, at least as a starting point... however, because so much of what we have to do with this is custom, I don't think it's worth it.

Setting up the Grid

At small sizes, it stacks, and at large sizes, we need 3 columns and 2 rows... and we'll need to figure out what to do in between!

Because the layout does have to change at different sizes, I'd suggest taking the time to set up grid-template-areas.

.bento-grid {
  display: grid;
  gap: 1rem;

  grid-template-areas:
    "card-one"
    "card-two"
    "card-three"
    "card-four"

    @media (width > 600px) {
      grid-template-areas:
        "card-one card-two"
        "card-three card-four" 
    }

    @media (width > 900px) {
    grid-template-areas:
      "card-one card-two card-three"
      "card-four card-four card-three";
  }
}

Placing the elements in the grid

To place the elements in the grid, we have two choices:

• Give each element a class
• Use :nth-child()

In a case like this, I'm more of a fan of using :nth-child() because the class names would be kind of arbitrary anyway.

.card:nth-child(1) {
  grid-area: card-one;
}

Adjusting the cards layouts

The other thing I'd suggest is using the same HTML for every card, so that they're more interchangeable, and it's easier switch out content.

At small screen sizes, we always have the image first, then the heading, then the text as well, which gives us a hint that that is probably the order we should use in our HTML.

Then, when we need things to adapt to different sizes, we can change the order of things a little bit:

@media (width > 600px) {
  .card:nth-child(even) img {
    order: 3;
  }
}

And in specific cases, we can make bigger changes:

.card:nth-child(4) {
  display: grid;

  @media (width > 900px) {
    grid-template-columns: auto 1fr;
    align-content: start;
    column-gap: 1rem;

    img {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
    }

    h3 {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }

    p {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }
  }
}

Be very careful when changing the order of elements, whether it is with Flexbox or Grid. The actual order of the elements is what we write in the HTML, and that should be the logical order. When we move things like an image, it's probably fine. If you change the order of focusable elements, it could lead to confusion for people who use the keyboard to navigate a page.