Grid - Related

Question 1

What are the sizing keywords?

Answer 1

When sizing rows and columns, you can use all the lengths you are used to, like px, rem, %, etc, but you also have keywords:

• min-content: the minimum size of the content. Imagine a line of text like “E pluribus unum”, the min-content is likely the width of the word “pluribus”.
• max-content: the maximum size of the content. Imagine the sentence above, the max-content is the length of the whole sentence.
• auto: this keyword is a lot like fr units, except that they “lose” the fight in sizing against fr units when allocating the remaining space.
• fit-content: use the space available, but never less than min-content and never more than max-content.
• fractional units: They essentially mean “portion of the remaining space”.

Source css-tricks

Question 2

what is a subgrid?

Answer 2

Subgrid allows grid items to have a grid of their own that inherits grid lines from the parent grid.

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

.grid-item {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: subgrid;
}

.child-of-grid-item {
  /* gets to participate on parent grid! */
  grid-column: 3 / 6;
 }

It’s also useful to know about display: contents;. This is not the same as subgrid, but it can be a useful tool sometimes in a similar fashion.

<div class="grid-parent">
 <div class="grid-item"></div>
 <div class="grid-item"></div>
 <ul style="display: contents;">
 <!-- These grid-items get to participate on the same grid!-->
 <li class="grid-item"></li>
 <li class="grid-item"></li>
 </ul>
</div>

Source css-tricks

Question 3

Explain min-content sizing keyword.

Answer 3

The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

Syntax

 /* Used as a length */ 
 width: min-content;
 inline-size: min-content;
 height: min-content;
 block-size: min-content;

/* used in grid tracks */
 grid-template-columns: 200px 1fr min-content;

Source MDN

Question 4

Explain max-content sizing keyword.

Answer 4

The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.

Syntax

 /* Used as a length */
 width: max-content;
 inline-size: max-content;
 height: max-content;
 block-size: max-content;

/* used in grid tracks */
 grid-template-columns: 200px 1fr max-content;

Source MDN

Question 5

Explain fit-content sizing keyword.

Answer 5

fit-content sizing keyword is essentially a shorthand for the following:

box {
  width: auto;
  min-width: min-content;
  max-width: max-content;
 }

Thus the box sizes with its containing box, but to a minimum of min-content and to a maximum of max-content.

Source quirksmode

Question 6

What does the min() CSS function do?

Answer 6

The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value.

It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

The expressions can be math expressions, literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>).

You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

Source MDN

Question 7

What does the max() CSS function do?

Answer 7

The max() CSS function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value.

It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

The expressions can be math expressions, literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>).

You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

Source MDN

Question 8

What does the fit-content() CSS function do?

Answer 8

The fit-content() CSS function allows an element’s size to be as large as the content it wraps, but not larger than the value passed to the fit-content() function.

It clamps a given size to an available size according to the formula

min(min(max-content, available-size), max(min-content, argument))

Note: “available-size” is the available width in the grid.

The fit-content() function accepts a <length> or a <percentage> as an argument.

For example fit-content(200px) is equivalent to:

min(min(max-content, available-size), max(min-content, 200px));

Source MDN

Question 9

What is the difference between auto-fill and auto-fit keywords?

Answer 9

• 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.

A useful tip to remember here is that the columns added in both cases (whether collapsed or not) are not implicit columns — that has specific meaning in the spec. In our case, we are adding/creating columns in the explicit grid in the same way as if we declared you wanted 12 columns, for example. So column number -1 will work to target the end of this grid, which it doesn’t if you are creating columns in the implicit grid. Props to Rachel Andrew for this tip.

Source css-tricks

Question 10

What is the use of the “span” keyword?

Answer 10

A grid item by default spans a single cell. If you want to change that, the span keyword can be quite convenient. For example setting grid-column-start: 1 and grid-column-end: span 2 will make the grid item span two cells, from the first to the third line.

You can also use the span keyword with grid-column-start. If you set grid-column-end: -1 and grid-column-start: span 2 the grid-item will be placed at the last line and span 2 cells, from the last to third to last line.

Source css-tricks

Question 11

What does display: contents; css declaration do?

Answer 11

The contents value of the display property is a new value that is described in the Display specification as follows:

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

If you set an item to display: contents, the box it would normally create disappears and the boxes of the child elements appear as if they have risen up a level.

NOTE: this feature is currently supported by all major browser (not IE) but with bugs. Please check its support in caniuse before using it.

Source MDN

Question 12

What happens if you set display: contents in a grid item or a flex item?

Answer 12

If you set an item to display: contents;, the box it would normally create disappears and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid/flex item can become grid/flex items.

Source MDN

Question 13

How can you adjust the grid items children to adjust to the grid track?

Answer 13

By default, each grid item is stretched to fill the entire grid area, but its child elements are not stretched to fill its height by default, so the grid area can have some unused height.

Solution

Make each grid-item a flex container with a direction of column so items stack vertically, atop one another. Then apply a flex grow to the child elements, forcing them to stretch to fill the space.

Extra step for images

Stretching an image will change its height-to-width ratio, distorting the picture.

Fortunately, CSS provides a special property for controlling this behaviour, object-fit. By default, an <img> has an object-fit value of fill, meaning the entire image will be resized to fill the <img> element. You can also set other values to change this.

• To expand the image to fill the box (resulting in part of the image being cut off), use cover.
• To resize the image so that it fits entirely in the box (resulting in empty space within the box), use contain.

For a more detailed look at this property, see https://css-tricks.com/on-object-fit-and-object-position/.

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

Question 14

How can you check if the browser supports grid box model?

Answer 14

With @suppors feature query.

@supports (display: grid) {
  ...
 }

The @supports rule is followed by a declaration in parentheses. If the browser understands the declaration (in this case, it supports grid), it applies any rulesets that appear between the braces. If it doesn’t understand this, it won’t apply them. This means you can provide one set of styles using older layout technologies like floats. These will not necessarily be ideal styles (you’ll have to make some compromises), but it will get the job done.

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

Question 15

What are feature queries?

Answer 15

Feature queries are created using the CSS at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide CSS that will only run based on the result of that test.

Source MDN

Question 16

How can you add styles for a browser that doesn’t support flex or grid box models?

Answer 16

With:

@supports not(display: grid) or not(display: flex) { . . . }

Question 17

How do you check for support of a feature using feature queries?

Answer 17

With @supports and the feature you want to test support for within parentheses. For example use:

@supports (display: flex)

to query for flexbox support. Feature queries may be constructed in a few other ways as well:

• @supports not() — Only apply rules in the feature query block if the queried declaration isn’t supported
• @supports () or ()—Apply rules if either queried declaration is supported
• @supports () and ()—Apply rules only if both queried declarations are supported

These can be combined as well to query for more complex situations. The or keyword can be useful to query for support using prefixed properties:

@supports (display: grid) or (display: -ms-grid)

WARNING IE doesn’t support the @supports rule. That browser ignores any rules within the feature query block, regardless of the actual feature support. This is usually okay, as you’ll want the older browser to render the fallback layout.

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

Question 18

What are the possible display values to define a grid container?

Answer 18

• grid – generates a block-level grid
• inline-grid – generates an inline-level grid

.container {
 display: grid | inline-grid;
}

Source css-tricks

Question 19

What’s wrong with this css ruleset?

.block-element {
  display: contents;
  background-color: red;
  color: red
}

Answer 19

Some of the CSS declarations won’t be applied. display: contents; makes the html element’s box disappear. Therefore, all the css declarations that change the style of the element’s box wont be applied. Which means that in this css ruleset:

.block-element {
  display: contents;
  background-color: red;
  color: red
}

CSS declaration background-color: red won’t be applied because the element’s box won’t exist. On the other hand color: red; declaration will be applied because it is a style meant for the content of the box.

Source Kevin Powel YT video