CSS grid

Question 1

What is CSS grid?

Answer 1

CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system.

Question 2

How do you set the grid column and row sizes ?

Answer 2

set the column and row sizes with grid-template-columns and grid-template-rows

Question 3

What is the first step using CSS grid?

Answer 3

Creating a container with…

display: grid
.

Question 4

What does grid-template-columns determine the size of?

Answer 4

The width of the columns.

Question 5

What does grid-template-rows determine the size of?

Answer 5

The height of the rows.

Question 6

What layout results from this code?

display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px auto;

Answer 6

grid-template-columns says that there will be 2 columns. The first column is 100px wide and the second takes up the remaining horizontal space available.
grid-template-rows says that their will be three rows. The first two will have a height of 50px and the third row will take up the remaining vertical space.

Question 7

If you give this container 8 child elements what happens to the layout?

#container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 50px 50px;
  height: 100vh;
}

Answer 7

There will be 2 columns 100px wide.
The first two rows will be 50px high. The last two rows will equally share the remaining available vertical space. As a height was not specified for the remaining rows the default auto is used.

Question 8

What will the layout be with the following rules?

#container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: ;
  height: 100vh; 
}

Answer 8

two columns that equally share the available horizontal space. The rows will also share available vertical height among the elements as the default height is auto for grid rows.

Question 9

What is the grid-template property?

Answer 9

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

Question 10

What is the grid-template property?

Answer 10

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

Question 11

What is a good way to remember the argument you give to grid-template property?

Answer 11

Like drawing an L !!!

Draw the line down first ( rows ) and then the line across ( columns )

grid-template: repeat(4, 50px) / repeat(3, 1fr);

Always have a massive row first!!!!

Question 12

If you have 2 columns how many column lines do you have?

Answer 12

3

column1 | column2 |

Question 13

What is the grid-column property?

Answer 13

This property is a shorthand for the following CSS properties:

grid-column-start
grid-column-end

Question 14

What does this property do?

grid-column: 1 / span 2;

Answer 14

it says that the element should start at column line 1 and span 2 columns. equivalent to

grid-column: 1 / 3;

Question 15

What does this property do?

#footer {
  grid-column: 1/-1;
}

Answer 15

It says that the element should start at the first column line and end at the last column line.

If you think in a circular way this makes sense.