Grid - Concepts

Question 1

What is the CSS Grid layout?

Answer 1

The CSS grid lets you define a two-dimensional layout of columns and rows and then place elements within the grid. Some elements may only fill one cell of the grid; others can span multiple columns or rows; could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 2

What is a grid?

Answer 2

A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines.

Source MDN

Question 3

What are the properties of a grid?

Answer 3

• Fixed and flexible track sizes - using px, percentages or the new fr units.
• Item placement - Items can be placed explicitly using line numbers, names or by targeting an area of the grid implicitly.
• Creation of additional tracks to hold content - can add additional rows and columns when needed.
• Alignment control - can control how the items align once placed into a grid area, and how the entire grid is aligned.
• Control of overlapping content - More than one item can be placed into a grid cell or area and they can partially overlap each other.

Source MDN

Question 4

What is a grid container?

Answer 4

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

<div class="container">
 <div class="item item-1"> </div>
 <div class="item item-2"> </div>
 <div class="item item-3"> </div>
</div>

Source css-tricks

Question 5

What is a grid item?

Answer 5

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

<div class="container">
  <div class="item"></div>
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Source css-tricks

Question 6

What is a grid line?

Answer 6

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. Here the yellow line is an example of a column grid line.

Source css-tricks

Question 7

What is a grid cell?

Answer 7

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.

Source css-tricks

Question 8

What is a grid track?

Answer 8

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.

Source css-tricks

Question 9

What is a grid area?

Answer 9

The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Source css-tricks

Question 10

What does the fr unit do?

Answer 10

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

.container {
  grid-template-columns: 1fr 1fr 1fr;
 }

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn’t include the 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

Source css-tricks

Question 11

What properties have no effect on a grid-item?

Answer 11

float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on a grid item.

Source css-tricks

Question 12

What are fr units?

Answer 12

fr units essentially mean “fraction of the remaining space”. So a declaration like:

grid-template-columns: 1fr 3fr;

Means, loosely, 25% 75%. Except that those percentage values are much more firm than fractional units are. For example, if you added padding to those percentage-based columns, now you’ve broken 100% width (assuming a content-box box model).

Source css-tricks

Question 13

What is an explicit grid?

Answer 13

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 14

What is an implicit grid?

Answer 14

If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.

Source css-tricks

Question 15

What is a flexible grid?

Answer 15

A grid that doesn’t explicitly declare the number of rows or columns, but automatically creates them based on somewhat loose instructions and the content you provide.

Source css-tricks

Question 16

Explain why grid together with fr units make all CSS layout frameworks obsolete

Answer 16

Grid and Fr units are cool because they remove the need of float based column layouts.

For a longer explanation please read the following example.

If we want to have a layout of 3 columns of the same width with float we would set a width of 33.333333% with the question being on how may decimals do we need to set.

[class*="column"] {
  float: left;
}

.column { width: 33.333333%; }

What if we want to add a gap between the boxes? let’s try to set a gab of 2% in between the columns. We will need 2 gaps therefore gap space will be 4%. To do that we need to remove that space from the column widths. (100% - 4%)/3 = 96%/3 = 32%

[class*="column"] {
  float: left;
  padding 0 1%;
}

.column { width: 32.333333%; }

/* Removes the gaps from the sides of the row */
.row {
  margin-left: -1%;
  margin-right: -1%;
}

Ok now wee need to think of big screens 2% may be too small let’s increase the gap to 3% for screens wider than 1024px.
Aaaargh we need to redo the math. (100% - 6%)/3 = 94%/3 = 31.333%

And we now need to use media queries :-(

@media only screen and (min-width : 1025px) {
  [class*="column"] {
    float: left;
    padding 0 1.5%;
  }

  .column { width: 31.333%; }

  /* Removes the gaps from the sides of the row */
  .row {
    margin-left: -1.5%;
    margin-right: -1.5%;
  }
}

To be honest what we should really use for the gaps is a relative unit like 2em to have the gaps relatives to the typography.

How do we do that?

It will need to be decided at runtime after the viewport is loaded after the viewport width is known.
And we will need to use calc to do that….

[class*="column"] {
  float: left;
  padding 0 1em;
}

.column { width: calc(100 - 2*2em)/3)%; }

/* Removes the gaps from the sides of the row */
.row {
  margin-left: -1em;
  margin-right: -1em;
}

Ok we finally have what we need and it works as long as we stick to the 3 column layout but lets be honest we will need to change the column layout as the screen size changes from one device to another device.

You can imagine the headache of media queries and calculations that we will needed to solve this problems. And that is the reason we used prefabricated CSS layout frameworks like Twitter bootstrap.

But now we have grid and fr units!!!!

We can use 1fr for each column and set a gap of 2em and let the computer deal with the complicated math.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-gap: 2em;
}

All the above work can be reduce to 3 lines of css and the best part is that it works no matter the number of columns!

Source Jen Simmons - layout land

Question 17

Are content pseudo-elements ::before and ::after treated as grid items?

Answer 17

Yes, they are.

Source css-tricks

Question 18

What are the differences between grid and flexbox?

Answer 18

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.

One-dimensional versus two-dimensional layout

A simple example can demonstrate the difference between one- and two-dimensional layouts.

Given this html

<div class="wrapper">
  < div>One</div>
  < div>Two</div>
  < div>Three</div>
  < div>Four</div>
  < div>Five</div>
 < /div>

If we define a flexbox layout and use the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.

.wrapper {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}

.wrapper > div {
  flex: 1 1 150px;
 }

Problem is that the columns won’t have the same width. If instead we define a grid layout.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 }

The columns will all have the same with.

Grid & Flex resulting layouts

Source MDN

Question 19

How do you define a grid container as a containing block?

Answer 19

Adding position: relative; to the grid container, just as you would make a containing block for any other absolutely positioned items.

Source MDN

Question 20

When should you use grid or flexbox?

Answer 20

Content out or layout in?

Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space on that line.

Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.

Ask yourself when deciding between grid or flexbox is:

• Do I only need to control the layout by row or column – use a flexbox
• Do I need to control the layout by row and column – use a grid

Grid & Flex resulting layouts

Source MDN