Grid

Question 1

In a nutshell, what is the difference between flexbox and grid?

Answer 1

Flex box is for alignment

Grid is for layout

Question 2

Set a container to grid
set a container to grid inline (even if it’s block)

What’s the difference

Answer 2

display: grid
display: inline-grid

Inline grid is inline. It also doesn’t make the grid container auto fill the horizontal space. It is the size of the items.

Question 3

define 2 columns and 2 rows to place 4 grid items

define 3 columns and 2 rows to place 4 grid items

What will happen with the missing item?

Answer 3

.container {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px;
}

The last grid item just isn’t fill in

Question 4

Shorthand for grids and rows

Answer 4

forward slash
.container {
  display: grid;
  grid-template: 50px 50px / 50px 50px 50px;
}

Question 5

With:
.container {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
}
what happens with the 5th item?

Answer 5

Looks like:
Item 1 Item 2
Item 3 Item 4
Item 5

It’s still added to the grid, but those grid items have undefined height. The width doesn’t disturb the set width

IF the height is set. It follows overflow rules.

Question 6

Control whether the overflow goes down or to the right

Answer 6

Down
grid-auto-flow: row;

Right
grid-auto-flow: column;

Question 7

Add a gap between columns
Add a gap between rows
Shorthand for both

Answer 7

row-gap: 40px
column-gap: 10px

gap: row col
gap: 40px 10px

Question 8

What is an implicit vs explicit grid

Answer 8

explicit is when you have enough items defined.

Implicit when it automatically creates rows or columns for extra items for undefined space.

Question 9

How to distinguish implicitly and explicitly created rows in dev tools?

Answer 9

explicit dashed and more solid

implicit dotted

Question 10

How to view grid in browser

Answer 10

under layout> grid overlays> select the grid containers.

Question 11

How are grid items auomatically named/numbered?

Answer 11

They are not. The lines are numbered.
Far left line is 1 and they increase from there.
AND
Far right line is -1 and decreases to the left

Question 12

Create a custom name for a grid line

Answer 12

.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Question 13

Create multiple custom names for the same grid line

Answer 13

.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Question 14

Repeat grid template setup

Answer 14

.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
Which is equivalent to this:
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Question 15

Grid terms:
grid container
grid item
grid line
grid cell
grid track
grid area

Answer 15

grid container- The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

grid item- The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

grid line- The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column.

grid cell -The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

grid track- The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here’s the grid track between the second and third-row grid lines.

grid area- Multiple cells. The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells.

Question 16

difference between grid cell and grid item?

Answer 16

item is the item. The children (i.e. direct descendants) of the grid container.
cell is the space. The item may not take up all the spacee

Question 17

Define the start and end points for an item on a grid

Answer 17

grid-column-start: 1;
  grid-column-end: 6;
What happens if the start is after the end?
  grid-row-start: 4;
  grid-row-end: 1;
(scroll down)

Doesn’t matter. The grid area just becomes in between those 2 grid lines

Question 18

Shorthand for either
  grid-column-start: 1;
  grid-column-end: 6;
or
  grid-row-start: 1;
  grid-row-end: 4;

Answer 18

grid-column: 1 / 6;

grid-row: 1 / 4

Question 19

Shorthand for everything:
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 3;

Answer 19

grid-area: row / col / row / col

grid-area: 1 / 1 / 3 / 6;

Question 20

Name a specific area that you can then assign items to

Answer 20

Name the areas with “grid-template-areas”:
grid-template: 40px 40px 40px 40px 40px / 40px 40px 40px 40px 40px;

grid-template-areas:
“living-room living-room living-room living-room living-room”
“living-room living-room living-room living-room living-room”
“bedroom bedroom bathroom kitchen kitchen”
“bedroom bedroom bathroom kitchen kitchen”
“closet closet bathroom kitchen kitchen”
}

Assign the area
#living-room {
grid-area: living-room;
}

Question 21

Indicate an empty cell with grid-template areas

Answer 21

with a .

“living-room . living-room living-room living-room”

Question 22

What are the two difference uses for “grid-area”

Answer 22

1.
as a shorthand on grid items for:
grid-column-start
  grid-column-end
  grid-row-start
  grid-row-end:
2. on grid items to refer to named areas that were set with grid-template-areas

Question 23

Make a grid item take up a CERTAIN NUMBER of rows or columns (not just in between certain rows and columns)

Answer 23

grid-row-start: 1
grid-row-end: span 2

grid-row-start: span 2 (extends back from end)
grid-row-end: 3

Question 24

Control the order of items in a grid

Answer 24

order on grid items
order: 0
or 1
or -1
the lower the number, the closer to top left they are (?).

Question 25

how do fr units work with grid?

Answer 25

They fill the space
if two elements are set to 1fr and 3fr respectively, the space is divided into 4 equal shares; the first element occupies 1/4 and the second element 3/4 of any leftover space.

If other units are present they split the remaining space.

Question 26

What happens if a grid cell is expected to shrink beyond the size of the grid item?

Answer 26

The cell doesn’t shrink. As you shrink you can have cells with the same fr value and different actual sizes.

Question 27

control the min and max size of a track (only works for a grid container)

control the min and max size of a track (anywhere)

Answer 27

minmax()- defines a maximum size and a minimum size. Only takes 2 arguments

clamp(minimum-size, ideal-size, maximum-size)
The cell will be the ideal-size. Unless the ideal size is greater or lesser that the minimum size.
With static px values clamp(2px, 500px, 1000px) it will always be 500px.
If ideal-size is variable clamp(200px, 50%, 500px) it will always be 50%. Until that actual px is greater or lesser than the minimum-size or maximum-size.

Question 28

Make grid-cells wrap to next line when the size of the window shrinks

Answer 28

auto-fit in a repeat function.
grid-template-columns: repeat(auto-fit, 200px);

use with minmax() for best results (make them fill the frame and wrap):
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Question 29

What’s the difference between auto-fit and auto-fill?

Answer 29

auto-fill FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.

Question 30

sdf

Answer 30

dfs