diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md index 1a55f2a0ce9..bba9197b3c6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md index 628cd41b12e..f5a7348e121 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md index 9a5d751bb22..e7b47f5f468 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md @@ -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 diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md index 78eef0db1fe..55dead81ed6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-css-grid/6732269a7aa2ca1d6b6574fe.md @@ -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--