chore(curriculum): add missing comprehension check questions for css grid lectures (#57269)

Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2024-11-22 08:41:45 -08:00
parent d6e3d98bce
commit 86025bdc02
4 changed files with 415 additions and 17 deletions
@@ -14,20 +14,109 @@ Watch the lecture video and answer the questions below.

 ## --text--

-How Can You Create Flexible Grids with the fr Unit? question?
+What is the purpose of the `grid-template-columns` property in a CSS grid container?

 ## --answers--

-Answer 1
+It sets the color for the columns.
+
+### --feedback--
+
+Think about how sizes are determined for columns

 ---

-Answer 2
+It sets the names and track sizing for columns.

 ---

-Answer 3
+It sets the gap between the columns.
+
+### --feedback--
+
+Think about how sizes are determined for columns
+
+---
+
+It specifies the number of rows in the grid.
+
+### --feedback--
+
+Think about how sizes are determined for columns

 ## --video-solution--

-1
+2
+
+## --text--
+
+How does the `fr` unit in CSS grid differ from using percentages?
+
+## --answers--
+
+`fr` units create overflow in containers whereas percentages do not.
+
+### --feedback--
+
+Remember that `fr` units allow for proportional distribution of space.
+
+---
+
+`fr` units allocate space based on the available space in the container, whereas percentages take up a percentage of the available space.
+
+---
+
+`fr` units are used for creating flexible layouts whereas percentages are not.
+
+### --feedback--
+
+Remember that `fr` units allow for proportional distribution of space.
+
+---
+
+There is no difference between `fr` units and percentages.
+
+### --feedback--
+
+Remember that `fr` units allow for proportional distribution of space.
+
+
+## --video-solution--
+
+2
+
+## --text--
+
+What happens when you use `grid-template-columns: 1fr 1fr 1fr 1fr;` in a CSS grid layout?
+
+## --answers--
+
+The container will have four columns, each taking up 10% of the container’s width.
+
+### --feedback--
+
+Think about how the space is distributed when using the `fr` unit.
+
+---
+
+The columns will stack vertically.
+
+### --feedback--
+
+Think about how the space is distributed when using the `fr` unit.
+
+---
+
+The columns will be evenly spaced, but their sizes will remain fixed.
+
+### --feedback--
+
+Think about how the space is distributed when using the `fr` unit.
+
+---
+
+The columns will take up equal fractions of the available space, with the size adjusting automatically when the container resizes.
+
+## --video-solution--
+
+4
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.

 ## --text--

-How Can You Create Gaps Between Tracks in a Grid? question?
+What is the purpose of the `column-gap` property in a CSS Grid layout?

 ## --answers--

-Answer 1
+It sets the space between grid columns

 ---

-Answer 2
+It defines the size of the grid items
+
+### --feedback--
+
+Think about the spacing for columns here.

 ---

-Answer 3
+It defines the number of columns in the grid.
+
+### --feedback--
+
+Think about the spacing for columns here.
+
+---
+
+It sets the space between grid rows.
+
+### --feedback--
+
+Think about the spacing for columns here.

 ## --video-solution--

 1
+
+## --text--
+
+What happens if you use the `normal` value for the `column-gap` property?
+
+## --answers--
+
+The `gap` between columns is set to 10
+
+### --feedback--
+
+Review the beginning of the video where this was discussed. 
+
+---
+
+The `gap` between columns is set to -1
+
+### --feedback--
+
+Review the beginning of the video where this was discussed. 
+
+---
+
+The `gap` between columns is set to 14
+
+### --feedback--
+
+Review the beginning of the video where this was discussed. 
+
+---
+
+The `gap` between columns is set to 0
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which of the following is the correct property used as a shorthand for creating gaps between rows and columns?
+
+## --answers--
+
+`gapsAndSpaces` property
+
+### --feedback--
+
+Review the end of the video where the correct property is discussed. 
+
+---
+
+`space` property
+
+### --feedback--
+
+Review the end of the video where the correct property is discussed. 
+
+---
+
+`rowGapColumnGap` property
+
+### --feedback--
+
+Review the end of the video where the correct property is discussed. 
+
+---
+
+`gap` property
+
+## --video-solution--
+
+4
@@ -14,20 +14,133 @@ Watch the lecture video and answer the questions below.

 ## --text--

-How Can You Repeat Track Listings in a Grid Layout? question?
+Which of the following is the correct syntax for repeating track listings?

 ## --answers--

-Answer 1
+```css
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(1fr times 4);
+  column-gap: 10px;
+}
+```
+
+### --feedback--
+
+Review the beginning of the video where this was discussed. 

 ---

-Answer 2
+```css
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: 10px;
+}
+```

 ---

-Answer 3
+```css
+.grid-container {
+  display: grid;
+  grid-template-columns: multiply(4, 1fr);
+  column-gap: 10px;
+}
+```
+
+### --feedback--
+
+Review the beginning of the video where this was discussed. 
+
+---
+
+```css
+.grid-container {
+  display: grid;
+  grid-template-columns: repeatSections(4, 1fr);
+  column-gap: 10px;
+}
+```
+
+### --feedback--
+
+Review the beginning of the video where this was discussed. 
+
+## --video-solution--
+
+2
+
+## --text--
+
+What is the primary benefit of using the `repeat()` function in the `grid-template-columns` property?
+
+## --answers--
+
+It allows repeating column definitions more concisely and reduces redundancy.
+
+---
+
+It makes the code run faster.
+
+
+### --feedback--
+
+Think about how this property reduces repetition.
+
+---
+
+It leads to error free code.
+
+### --feedback--
+
+Think about how this property reduces repetition.
+
+---
+
+It makes the web page more responsive.
+
+### --feedback--
+
+Think about how this property reduces repetition.

 ## --video-solution--

 1
+
+## --text--
+
+What is the result of setting `grid-template-columns` to `repeat(2, 20px 1fr);`?
+
+## --answers--
+
+It creates four columns all set to `1fr` wide.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
+
+---
+
+It creates two columns where each is set to `20px` wide.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
+
+---
+
+It creates four columns where the first and third are `20px` wide, and the second and fourth are `1fr` wide.
+
+---
+
+It creates three columns where the first and second are `20px` wide, and the third is `fr` wide.
+
+### --feedback--
+
+Review the end of the video where this was discussed.
+
+## --video-solution--
+
+3
@@ -14,19 +14,127 @@ Watch the lecture video and answer the questions below.

 ## --text--

-What Is the Difference Between an Implicit and Explicit Grid? question?
+Which properties control the columns and rows created implicitly by the browser in a CSS grid layout?

 ## --answers--

-Answer 1
+`cols` and `rows`
+
+### --feedback--
+
+Think about properties that define implicit grid tracks.

 ---

-Answer 2
+`col` and `row`
+
+### --feedback--
+
+Think about properties that define implicit grid tracks.

 ---

-Answer 3
+`implicit-columns` and `implicit-rows`
+
+### --feedback--
+
+Think about properties that define implicit grid tracks.
+
+---
+
+`grid-auto-columns` and `grid-auto-rows`
+
+## --video-solution--
+
+4
+
+## --text--
+
+Which properties are used to define explicit rows and columns in a CSS grid layout?
+
+## --answers--
+
+`row` and `fr`
+
+### --feedback--
+
+Review the beginning of the video where this was discussed.
+
+---
+
+`grid-explicit-rows` and `grid-explicit-columns`
+
+### --feedback--
+
+Review the beginning of the video where this was discussed.
+
+---
+
+`grid-template-rows` and `grid-template-columns`
+
+---
+
+`grid-gap` and `grid-flow`
+
+### --feedback--
+
+Review the beginning of the video where this was discussed.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following code examples is the correct way to set two explicit columns?
+
+## --answers--
+
+```css
+.grid-container {
+   display: grid;
+   grid-template-columns: 100px 100px;
+}
+```
+
+---
+
+```css
+.grid-container {
+   display: grid;
+   grid-template-columns: 100px 100px 100px 100px;
+}
+```
+
+### --feedback--
+
+Pay close attention to the property name and correct number of values in the examples.
+
+---
+
+```css
+.grid-container {
+   display: grid;
+   grid-template-rows: 100px 100px;
+}
+```
+
+### --feedback--
+
+Pay close attention to the property name and correct number of values in the examples.
+
+---
+
+```css
+.grid-container {
+   display: grid;
+   grid-column-start: 100px 100px;
+}
+```
+
+### --feedback--
+
+Pay close attention to the property name and correct number of values in the examples.

 ## --video-solution--