From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Create a grid for each card

Create a grid for each card - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Create a grid for each card

- Let's start with the individual cards. Here I want the month and date to appear on the left-hand side, as if they were inside a box. And then the title and meta-description to appear on the right-hand side, one after the other. And I want all of this to center align vertically to make it all nice and tidy. Before grid, the only way we could do this was by floating the month and date to the left, so encasing that in a container, then encasing the title and meta-description in another container, and floating that to the right and then we'd use padding and margin and everything to get it to align. With grid, we approach this problem very differently. Instead we make each card a grid, and then we define it, two columns and two rows inside that grid, and place the items on the grid. So the month and date are placed in the first column, and the two rows, then the title is placed in the second column on the first row, and the meta-description is placed in the second column on the second…

Contents