Here we have a series of simple cards that all stack because they are contained in section elements, which are block. Let's create a grid layout instead.
Using the correct selector, create a grid for the cards with three columns that are each 20rem wide. No need to worry about specifying the rows; they will be created automatically.
Hint 1: For now, don't use shorthand for this.
Hint 2: Make sure your properties are in alphabetical order.
The problem with the columns we just created is that they have a fixed width which probably doesn't perfectly fit the space available and can cause an annoying horizontal scrollbar.
To fix this, change the columns so that each of the three columns takes up an equal amount of the space available, no matter how much space there is.
Hint: You should not use percentage units. Use a unit that is for use with grid only.
This is looking good, but let's add some space between the rows and columns.
1rem of space between columns.2rem of space between rows.Hint 1: For now, don't use shorthand for this.
Hint 2: Make sure your properties are in alphabetical order.
So far, we've only focussed on columns and allowed the browser to automatically generate the rows. But sometimes, you want to manually set the size of rows.
Add the CSS to manually set the two rows to each be 10rem high.
Hint 1: For now, don't use any shorthand for this.
Hint 2: Make sure your properties are in alphabetical order.
Both of the rows we added are the same size, and there's another way we can write it when there are multiple rows that are all equal.
Change the grid-template-rows value to use the repeat shorthand method instead of manually written values for each row.
So far, each grid child is automatically positioned into a single grid cell, but we can change that if we want.
Using the provided .card:first-child selector, set the first card to span across the first two columns, as shown in the image.
Hint 1: Don't use any shorthand for this. Manually define all values.
Hint 2: Make sure to alphabetize your properties. Pay careful attention to the order.
Hint 3: Depending on the size of your window, the spacing may look a little different.
To make it even larger, set the first card to also span across the first two rows, as shown in the image.
Hint 1: Don't use any shorthand for this. Manually define all values.
Hint 2: Make sure to alphabetize your properties. Pay careful attention to the order.
Hint 3: Depending on the size of your window, the spacing may look a little different.
If a grid has 5 columns, how many grid column lines does it have?
Here we have a simple grid already set up. Let's try something a little different. Add the grid-related CSS to make the grid children sit on the right side of their grid cells.
Hint 1: Make sure to alphabetize your properties.
Hint 2: Depending on the size of your window, the spacing may look a little different.
To complete the look we want, add the grid-related CSS to center the grid children vertically within their grid cells.
Hint 1: Make sure to alphabetize your properties.
Hint 2: Depending on the size of your window, the spacing may look a little different.