Set the element to be a grid container: grid
Setting it to have 3 rows and columns:
grid-rows-3 grid-cols-3
Setting it to fill the container: h-full
Setting a single container child to span across 2 grid columns and 2 grid rows: col-span-2
Gaps between the grid elements: grid-1
Grid can be used in a great way for making existing designs responsive. In this case, there exists already styling for the mobile view, we just used settings for the desktop size “md”:
“md:grid md:grid-cols-2 md:max-w-3xl md:gap-4