12 CSS Grid

Question 1

Turn element into gridcontainer, where children are arranged on a grid

Answer 1

display: grid;

Question 2

Create grid columns of specific sizes
Create grid rows of specific sizes

What happens if there are more items than the grid can allow

Answer 2

grid-template-columns: 50px 70px;
creates 1 column 50px wide, 1 column 70px wide

grid-template-rows: 50px 70px;

They are created onto new rows with a default height

Question 3

Units of measurement to control the size of rows and columns

Answer 3

px, em and the other regulars

fr- size is a fraction of the available space
grid-template-row: 1fr 4fr;
frame is set into 5 pieces,

auto- sets the column or row to the width or height of its content,

%: adjusts the column or row to the percent width of its container.

Question 4

add a gap in between rows or columns

Answer 4

grid-column-gap: 10px;

grid-row-gap: 10px;

Question 5

grid gap short version

Answer 5

grid-gap: 10px 20px;

Question 6

Make a box take up more cells

Answer 6

grid-column: 1/3
from the first gap to the third gap.
n/n+1 would just be normal space. n/n+2 would be 2 spaces.

grid-row:2/4

Question 7

Control left-right spacing of all cells

11

Answer 7

justify-items: center; /* Pack items around the center /
justify-items: start; / Pack items from the start /
justify-items: end; / Pack items from the end /
justify-items: flex-start; / Equivalent to ‘start’. Note that justify-items is ignored in Flexbox layouts. /
justify-items: flex-end; / Equivalent to ‘end’. Note that justify-items is ignored in Flexbox layouts. /
justify-items: self-start;
justify-items: self-end;
justify-items: left; / Pack items from the left /
justify-items: right; / Pack items from the right */

Question 8

Control top-bottom spacing of all cells

5

Answer 8

align-items: center; /* Pack items around the center /
align-items: start; / Pack items from the start /
align-items: end; / Pack items from the end /
align-items: flex-start; / Pack flex items from the start /
align-items: flex-end; / Pack flex items from the end */

Question 9

Control left-right spacing of content within a cell

Answer 9

justify-self:

align-self:

Question 10

Set the area of a grid cell
Merge certain cells together

How do you denote an empty cell?

How do you assign an item to the area?

Answer 10

grid-template-areas:
“a a a”
“. c c “
“footer footer footer”;

each word is 1 cell
each “ “ is 1 row

This merges a into 1 cell
c into 1 cell
footer into 1 cell

. denotes an empty cell

Assign with
.item1 {
grid-area: header;
}

Question 11

Set the area of a grid cell on the fly without using a template

Answer 11

item1 {
grid-area: 1/1/2/4;
}
(rows 1 to 2 and columns 1 to 4)

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

Question 12

Make lots of rows or columns

Answer 12

grid-template-rows: repeat(100, 50px);
100 rows 50 px wide
grid-template-columns: repeat(100, 50px)

Question 13

Repeat a non uniform pattern

Answer 13

grid-template-columns: repeat(2, 1fr 50px) 20px;
2 sets if 1fr 50, then 20 px
equiv to
grid-template-columns: 1fr 50px 1fr 50px 20px;

Question 14

Set min and max size of column or row

Answer 14

grid-template-columns: 100px minmax(50px, 200px);
create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.

grid-template-rows: 100px minmax(50px, 200px);

Question 15

Combine repeat and minmax

Answer 15

grid-template-columns: repeat(3, minmax(90px, 1fr));

Question 16

Create as many rows or columns as will fit with your desired row or column size

Create as many rows or columns as will fit desired row to column size and then fill to fit the row or column

Answer 16

grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

Question 17

Change row arrangement with frame size

Answer 17

@media (min-width: 300px){
    .container{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

  @media (min-width: 400px){
    .container{
      grid-template-areas:
      /* Only change code below this line */
        "header header"
        "advert content"
        "advert footer";
      /* Only change code above this line */
    }
  }

Question 18

Create grid within grid

Answer 18

.container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }  

.item3 {
    background: PaleTurquoise;
    grid-area: content;
    /* Only change code below this line */
    display:grid;
    grid-template-columns: auto 1fr;

    /* Only change code above this line */
  }