Grid - Explicit Grid

Question 1

What is an explicit grid?

Answer 1

An explicit grid is a manually defined grid. In other words the part of the grid were you define a fixed number of lines and tracks that form the grid by using the properties grid-template-rows, grid-template-columns, and grid-template-areas.

Example:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
}

Source css-tricks

Question 2

What do grid-template-columns and grid-template-rows properties do?

Answer 2

Define the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Source MDN

Question 3

How can you reference grid-lines?

Answer 3

Grid lines are automatically assigned positive numbers from these assignments (-1 being an alternate for the very last row).
But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

 .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];
 }

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

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

Source css-tricks

Question 4

How can you define repeating parts on a grid template?

Answer 4

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

.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];
}

If multiple lines share the same name, they can be referenced by their line name and count.

.item {
  grid-column-start: col-start 2;
 }

Source css-tricks

Question 5

What does grid-template-areas property do?

Answer 5

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualisation of the structure of the grid.

Source css-tricks

Question 6

How do you define a grid-area and use it in a grid-template-area?

Answer 6

Example:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
  "header header header header"
  "main main . sidebar"
  "footer footer footer footer";
}

That’ll create a grid that’s four columns wide by three rows tall. The entire top row will be composed of the header area. The middle row will be composed of two main areas, one empty cell, and one sidebar area. The last row is all footer.

Each row in your declaration needs to have the same number of cells.

You can use any number of adjacent periods to declare a single empty cell. As long as the periods have no spaces between them they represent a single cell.

Source css-tricks

Question 7

What happens to the grid-lines names when you define the template using grid-areas?

Answer 7

When you use the grid-areas syntax, the lines on either end of the areas are actually getting named automatically.

If the name of your grid area is foo, the name of the area’s starting row line and starting column line will be foo-start, and the name of its last row line and last column line will be foo-end. This means that some lines might have multiple names, such as when several areas start or end.

Source css-tricks

Question 8

What does grid-template property do?

Answer 8

A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Values:

• none – sets all three properties to their initial values
• <grid-template-rows> / <grid-template-columns> – sets grid-template-columns and grid-template-rows to the specified values, respectively, and sets grid-template-areas to none.

 .container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>; 
 }

It also accepts a more complex but quite handy syntax for specifying all three. Here’s an example:

.container {
  grid-template:
  [row1-start] "header header header" 25px [row1-end]
  [row2-start] "footer footer footer" 25px [row2-end]
  / auto 50px auto;
}

That’s equivalent to this:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
  "header header header" 
  "footer footer footer";
}

Source css-tricks

Question 9

What is the problem with the grid-template property?

Answer 9

Since grid-template doesn’t reset the implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, it’s recommended to use the grid property instead of grid-template.

Source css-tricks

Question 10

What do column-gap, row-gap, grid-column-gap, grid-row-gap properties do?

Answer 10

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Values:

<line-size> – a length value

Example:

 .container {
  /* standard */
  column-gap: <line-size>;
  row-gap: <line-size>;

 /* old */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
 }

Note: The gutters are only created between the columns/rows, not on the outer edges.

Source css-tricks

Question 11

What do gap, grid-gap do?

Answer 11

A shorthand for row-gap and column-gap

Values:

<grid-row-gap> <grid-column-gap> – length values

Example:

.container {
 /* standard */
 gap: <grid-row-gap> <grid-column-gap>;

/* old */
 grid-gap: < grid-row-gap>\<grid-column-gap>;
}

If no row-gap is specified, it’s set to the same value as column-gap.

Source css-tricks

Question 12

What does justify-items property do?

Answer 12

Aligns grid items along the inline (row) axis (as opposed to align-items which aligns along the block (column) axis). This value applies to all grid items inside the container.

Values:

• start – aligns items to be flush with the start edge of their cell
• end – aligns items to be flush with the end edge of their cell
• center – aligns items in the center of their cell
• stretch – fills the whole width of the cell (this is the default)

.container {
  justify-items: start | end | center | stretch;
}

Source css-tricks

Question 13

What does align-items property do?

Answer 13

Aligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline (row) axis). This value applies to all grid items inside the container.

Values:

• stretch – fills the whole height of the cell (this is the default)
• start – aligns items to be flush with the start edge of their cell
• end – aligns items to be flush with the end edge of their cell
• center – aligns items in the center of their cell
• baseline – align items along text baseline. There are modifiers to baseline — first baseline and last baseline which will use the baseline from the first or last line in the case of multi-line text.

.container {
  align-items: start | end | center | stretch;
}

Source css-tricks

Question 14

What does place-items property do?

Answer 14

place-items sets both the align-items and justify-items properties in a single declaration.

Values:

• <align-items> <justify-items> – The first value sets align-items, the second value justify-items. If the second value is omitted, the first value is assigned to both properties.

Source css-tricks

Question 15

What does justify-content property do?

Answer 15

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the inline (row) axis (as opposed to align-content which aligns the grid along the block (column) axis).

Values:

• start – aligns the grid to be flush with the start edge of the grid container
• end – aligns the grid to be flush with the end edge of the grid container
• center – aligns the grid in the center of the grid container
• stretch – resizes the grid items to allow the grid to fill the full width of the grid container
• space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between – places an even amount of space between each grid item, with no space at the far ends
• space-evenly – places an even amount of space between each grid item, including the far ends

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Source css-tricks

Question 16

What does align-content property do?

Answer 16

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the block (column) axis (as opposed to justify-content which aligns the grid along the inline (row) axis).

Values:

• start – aligns the grid to be flush with the start edge of the grid container
• end – aligns the grid to be flush with the end edge of the grid container
• center – aligns the grid in the center of the grid container
• stretch – resizes the grid items to allow the grid to fill the full height of the grid container
• space-around – places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between – places an even amount of space between each grid item, with no space at the far ends
• space-evenly – places an even amount of space between each grid item, including the far ends

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Source css-tricks

Question 17

What does place-content property do?

Answer 17

place-content sets both the align-content and justify-content properties in a single declaration.

Values:

<align-content> / <justify-content> – The first value sets align-content, the second value justify-content. If the second value is omitted, the first value is assigned to both properties.

Source css-tricks

Question 18

What do grid-column-start, grid-column-end, grid-row-start and grid-row-end properties do?

Answer 18

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

Note: If no grid-column-end/grid-row-end is declared, the item will span 1 track by default.
Items can overlap each other. You can use z-index to control their stacking order.

Source css-tricks

Question 19

What do grid-column and grid-row properties do?

Answer 19

Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

Values:

<start-line> / <end-line> – each one accepts all the same values as the longhand version, including span

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

If no end line value is declared, the item will span 1 track by default.

Source css-tricks

Question 20

What does grid-area property do?

Answer 20

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Values:

• <name> – a name of your choosing
• <row-start> / <column-start> / <row-end> / <column-end> – can be numbers or named lines

.item {
  grid-area: <name> | <row-start> / < column-start> / <row-end> / <column-end>;
}

Source css-tricks

Question 21

What does justify-self property do?

Answer 21

Aligns a grid item inside a cell along the inline (row) axis (as opposed to align-self which aligns along the block (column) axis). This value applies to a grid item inside a single cell.

Values:

• start – aligns the grid item to be flush with the start edge of the cell
• end – aligns the grid item to be flush with the end edge of the cell
• center – aligns the grid item in the center of the cell
• stretch – fills the whole width of the cell (this is the default)

.item {
  justify-self: start | end | center | stretch;
}

Source css-tricks

Question 22

What does align-self property do?

Answer 22

Aligns a grid item inside a cell along the block (column) axis (as opposed to justify-self which aligns along the inline (row) axis). This value applies to the content inside a single grid item.

Values:

• start – aligns the grid item to be flush with the start edge of the cell
• end – aligns the grid item to be flush with the end edge of the cell
• center – aligns the grid item in the center of the cell
• stretch – fills the whole height of the cell (this is the default)

.item {
  align-self: start | end | center | stretch;
}

Source css-tricks

Question 23

What does place-self property do?

Answer 23

place-self sets both the align-self and justify-self properties in a single declaration.

Values:

• auto – The “default” alignment for the layout mode.
• <align-self> <justify-self> – The first value sets align-self, the second value justify-self. If the second value is omitted, the first value is assigned to both properties.

Source css-tricks

Question 24

Rewrite this css rule using the repeat function grid-template-columns: 1fr 1fr 1fr 1fr;

Answer 24

grid-template-columns: repeat(4, 1fr);

Question 25

What css properties do you use to create an explicit grid?

Answer 25

When we use grid-template-columns and grid-template-rows we create an Explicit Grid. However if we try and place an item outside of that grid the browser will create an Implicit Grid line or lines in order to hold that item.

Source grid by example

Question 26

What does grid-column: 1 / -1; do?

Answer 26

It is the shorthand of grid-column-start: 1 and grid-column-end: -1.
In a nutshell it spans the grid item from the first column to the last one.

You can even use numbers smaller than -1

grid-column: 1 / -2;

Spans the grid item from the first column to the second to last column.

Source css-tricks

Question 27

Possible values of grid-template-columns and grid-template-rows properties

Answer 27

• none - Is a keyword meaning that there is no explicit grid.
• [linename] - A <custom-ident> specifying a name for the line in that location. Lines may have multiple names separated by a space inside the square brackets, for example [line-name-a line-name-b].
• <length> - Is a non-negative length.
• <percentage> - Is a non-negative <percentage> value, relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto.
• <fr unit> - Is a non-negative dimension with the unit fr specifying the track’s flex factor.
• max-content - Keyword representing the largest maximal content contribution of the grid items occupying the grid track.
• min-content - Keyword representing the largest minimal content contribution of the grid items occupying the grid track.
• minmax(min, max) - Functional notation that defines a size range, greater than or equal to min, and less than or equal to max.
• auto - As a maximum represents the largest max-content size of the items in that track.

As a minimum represents the largest minimum size of items in that track (specified by the min-width/min-height of the items). This is often, though not always, the min-content size.

If used outside of minmax() notation, auto represents the range between the minimum and maximum described above. This behaves similarly to minmax(min-content,max-content) in most cases.

Example

 .container {
  grid-template-columns: ... ...;
  /* e.g. 
  1fr 1fr
  minmax(10px, 1fr) 3fr
  repeat(5, 1fr)
  50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
  min-content 1fr min-content
  100px 1fr max-content
  */
 }

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. Therefore by default, an auto sized track will take up any remaining space in the grid container.

Source css-tricks and MDN

Question 28

Possible values of grid-template-areas property

Answer 28

• <grid-area-name> – the name of a grid area specified with grid-area
• . – a period signifies an empty grid cell
• none – no grid areas are defined

.container {
  grid-template-areas:
     " <grid-area-name> | . | none | ..."
     "...";
}

Source css-tricks

Question 29

What values can grid-column-start, grid-column-end, grid-row-start and grid-row-end properties have?

Answer 29

• <line> – can be a number to refer to a numbered grid line, or a name to refer to a named grid line
• span <number> – the item will span across the provided number of grid tracks
• span <name> – the item will span across until it hits the next line with the provided name
• auto – indicates auto-placement, an automatic span, or a default span of one

Example:

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Note: If no grid-column-end/grid-row-end is declared, the item will span 1 track by default.
Items can overlap each other. You can use z-index to control their stacking order.

Source css-tricks