Look at this layout with six types of instructions displayed this way in a grid. This is for wider screens, and for mobile screens, they're all listed one below the other like this. The moment you look at it, it looks very straightforward, right? Just two equal width columns with three rows. Let's see. This is a markup with a section and six divs inside. And so without grid, the elements follow the normal flow, which is fine for the mobile layout, except we need some spacing. So following the mobile first approach, let's first turn the section into a grid container,

layout, except we need some spacing. So following the mobile first approach, let's first turn the section into a grid container, display: grid, and add some gap: 1.5rem. This works for mobile layouts. Let's just check. Yeah, this is perfect. Now for screens wider than maybe about 520 pixels, we want two columns, right? Let's add a media query at @media screen and (min-width: 520px), section, grid-template-columns, repeat(2, 1.5fr). Let's see what we get.

Now the same applies for rows as well when the grid-auto-flow is row. For that, let's go back to our full page menu example. Remember this example we saw a while ago, we used both grid-template-columns and grid-template-rows to get equal sized cells. We didn't make it responsive then. So let's do that now. For mobile screen, we need only one column. So let me remove grid-template-columns and change this to 6 instead because we need 6 rows. Let's check the browser, view this in responsive mode, mobile screen size.

the automatically created rows or columns are auto sized to define the size of those implicit grid. Those are called implicit grid to define the size of those implicit grid rows or columns. We can use grid-auto-rows or grid-auto-columns property.