Creating Responsive Grids 3 exercises

Practice Recreating a Minimum Size Layout

In this exercise, we start with a simple layout that does not have grid enabled:


Loading exercise


0:00 It's time for another quick exercise. What I'd like you to do here is take this beautiful layout that we have currently with no grid involved whatsoever. The container has some basic styles, a width, a height, and a border, but there's no grid. I'd like you to use grid to turn it into this layout.

0:17 Now what's interesting, maybe interesting is a stretch, what's notable about this layout is that it's three equally sized columns. One of them happens to be green in the middle, but that middle column has a minimum width of 300 pixels.

0:31 They're not so equally sized anymore on a small screen. Here they're equal, but then the pink, salmony, coral columns are going to shrink way faster because there's a minimum size for this green one. In the HTML, there's nothing that you need to touch. It's just three boxes. One of them happens to be green. The color doesn't matter.

0:52 What I'd like you to do is in our grid container, implement a grid layout that has three equally sized columns where the middle column has a minimum size of 300 pixels. All right, so it's just two lines of code. One of them is to turn grid on. The other line is to define the columns.