Freecodecamp: [beta] CSS Grid challenges should be added

[thomlom]

Hello everyone,

Right now, the most advanced CSS skill we learn on the beta is the flexbox module.

CSS Grid is a great layout system and I think it will be an important skill for every front end developer in the future.

It would be good for new campers to learn about that.

[ahmadabdolsaheb]

@raisedadead @QuincyLarson should I work on that?

[raisedadead]

Yes sure @ahmadabdolsaheb ! Do propose your challenge ideas on this issue thread, for feedback

[raisedadead]

Then on we can have a PR.

[ahmadabdolsaheb]

The following is my proposed challenge list @raisedadead @Bouncey.

challenge list

• [x] Create a simple grid using the display and grid-template-columns property
• [x] Adjust the number of columns and rows of the grid
• [x] Modify the size of columns and rows using CSS grid units
• [x] Create gutter using the grid-gap properties
• [x] Control the placement of items on the grid using grid-column and grid-row
• [ ] Align the content inside each cell using the align properties
• [x] Divide the grid into areas using the area property
• [x] Use media queries to create responsive layouts
• [x] Reduce repetition using the repeat function
• [x] Limit the size of each item using the Minmax function
• [x] Automate the number of tracks in the grid using the auto-fill and auto-fit
• [x] Create grids within grids

[raisedadead]

@ahmadabdolsaheb thanks for working on this.
/cc @freeCodeCamp/moderators do weigh in your thoughts

[ahmadabdolsaheb]

@raisedadead as far as I understood the first commit should include a new Json named css-grid.json that has similar structure to the css-flexbox.json but include the followings changes and info:

• change the order of responsive-web-design-projects.json to 7
• set order of css-grid.json 6
• the first challenge should be the introduction with "challengeType": 7.
• the rest of the challenges should be "challengeType": 0,

additionally, where do I get the challenge id from?

[Bouncey]

@ahmadabdolsaheb the challenge style guide has the answers you are looking for 👍

[ahmadabdolsaheb]

thanks @Bouncey, this issue is in "deferred until after shipping beta", so the PRs would not be merged until after shipping beta?

[raisedadead]

We can merge a PR depending on how well we are able to QA, it. Differed status is just so that its not a high priority, for beta.

But that should in no way stop you from working on it in any way. Meaning, if we are able to get challenges QA-ed, we will push them through in the beta itself.

So, if you are ready please proceed with the PR. Thanks and happy contributing

[QuincyLarson]

@ahmadabdolsaheb A bit late to this discussion. Yes - as @raisedadead said, we may be able to merge this into the curriculum before shipping beta. Otherwise, we can QA and merge shortly afterward.

@raisedadead @ahmadabdolsaheb In your opinion, should we add this to the Front End Libraries section or should it immediately follow Flexbox in the Responsive Web Design section?

[ahmadabdolsaheb]

@QuincyLarson @raisedadead I think it should immediately follow Flexbox in the Responsive Web Design section.

Also, to avoid merge conflict, should I wait for the first PR to be merged before making other PR's for the upcoming challenges?

[QuincyLarson]

@ahmadabdolsaheb OK - thanks for your feedback. Since these challenges may or may not be ready in time to make it into beta, I recommend continuing to design them on your branch and pushing to the PR. Then we can merge all of the challenges at once once they are ready.

I left feedback on your PR. You're off to a great start!

[ahmadabdolsaheb]

@QuincyLarson thank you for the feedback. I will try to get it ready within a week or so. :)

[QuincyLarson]

@ahmadabdolsaheb Awesome! I'm excited to work through the rest of your Grid challenges :)

[moT01]

@ahmadabdolsaheb looks great - I hope you like my modifications.

Intro

"",
"CSS grid is a revolutionary layout module that easily accommodates for the implementation of complex web designs. It works by turning an HTML element into a grid with your desired number of columns and rows on which children elements can be placed.

Due to its popularity, CSS Grid is supported by most of the modern browsers today and is gaining support among other browsers quickly. This section covers how to use CSS grid and its related properties.",
""

Create a simple grid using the display and grid-template-columns property

"Turn any HTML element into a grid container by setting the display property to grid and defining the grid structure with the grid-template-columns property, as demonstrated below:",
"

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

",
"The example above transforms any element with the container class into a CSS grid that has two columns with the width of 50 pixels each.",
"Note that the number of parameters in the grid-template-columns property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.",
"Also, in CSS grid, the parent element is referred to as container and its children are called items"
"

---

",
"Turn the div with the container class into a grid with three rows. The height of each row should be 50 pixels."

Adjust the number of columns and rows of the grid

"Identical to the way grid-template-columns configures columns, you can adjust the rows using grid-template-rows. For example:",
"

.container {
display: grid;
grid-template-rows: 100px 100px 100px;
}

",
"The code above transforms any element with the container class into a CSS grid that has three rows with the height of 100 pixels each.",
"The rows and columns are referred to as tracks in CSS grid".
"

---

",
"Using the grid-template-columns and grid-template-rows properties make a grid that has two rows with the height of 100px each and three columns with the width of 150px each."

Modify the size of columns and rows using CSS grid units

"In addition to absolute and relative units like px and em, CSS grid accepts a variety of other units such as:
fr: sets the size of the track to a fraction of the available space,
auto: sets the size of the track to the width and height of its content automatically,
%: adjusts the size of the track to the specified percentage of the container.",
"The following is the code to the example demonstrated in the right window,",
"grid-template-columns: auto 10px 5% 2fr 1fr;",
"This snippet creates five columns. The width of the first column is as wide as its content. The width of the second column is 10 pixels. The width of the third column is 5 percent of the container's width. For the last two columns, the available space is divided into three sections two of which are given to the forth column and the rest to the fifth column.",
"

---

",
"Make a grid with three rows whose heights are as follows: 1 fraction of available space, auto, 2 fractions of available space."

Create gutters using the grid-gap properties

"grid-row-gap and grid-column-gap are used on a grid container to adjust the space between the rows and columns. However, it's often easier to use the shorthand version of these properties, grid-gap. If grid-gap has one value, it will use it to create a gutter between rows and columns. However, if there are two values, it will use the first one to set the gutter between the rows and the second for the gutter between the columns.",
"

---

",
"Using the grid-gap property, introduce a gap of 20px between rows. For the columns, create a gap that is 5 percent of the container."

Align items using the align and justify properties

"In CSS grid, the content of each child element is located in a box which is referred to as a cell. You can adjust the content's position in its cell vertically using the align properties and horizontally using justify properties. For adjusting the position of each element individually use the justify-self and align-self properties on grid items, and for adjusting the position of all the elements in the grid use the align-items and justify-items properties on the grid container.",
"In the example on the right, all of the items in the grid are aligned vertically in the center using
align-items: center on the container and only the third item is justified to center horizontally using justify-self: center.",
"In addition to center, there are other values to adjust elements in a cell: stretch will stretch the content across the width or height of the cell, start will place the item at the top or left of the cell, and end will place the item at the bottom or right of the cell.",
"

---

",
"Align all of the elements to the top of each cell using align-items and justify the item with the class d3 to the left of its cell."

Control the placement of items on the grid using grid-column and grid-row

"The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered, starting at the top left corner of the grid, with 1. To control the placement of items using grid-column and grid-row, you need to enter the line numbers between which the item will be placed. Here is an example:",
"grid-column: 1 / 3;",
"In the code above, the item is placed spanning from the first vertical line of the grid on the left to the third vertical line of the grid.
"

---

",
"Relocate the element with the d1 class to the last column and last row of the grid."

comment: possible answers
grid-column: span 2 / 7;
grid-column: 2 span 7;
grid-column: 2 / 7;

Divide the grid into areas using the area property

"To remove complexities from the grid, you can group and label cells using areas on the grid container in the following manner:",
"

grid-template-areas: "header header header"
"advert content content"
"footer footer footer ";

",
"As demonstrated on the right, the code above groups the top three cells as the header and the bottom three cells as the footer. The left cell in the middle row is labeled as advert and the rest of the cells in the middle row are labeled as content.",
"Note that every word represents a cell and every pair of quotation marks represent a column.",
"After setting the areas for the container, you could place any item in the desired area by using grid-area like this: .d3 { grid-area: content }; ",
"

---

",
"Modify the grid-template-areas property to expand the advert area to cover the left column completely."

Use media queries to create responsive layouts.

"One way to make CSS grid more responsive is to use media queries. You could rearrange the grid areas, change the dimensions of the grid, and change the placement of items to archive your desired design.",
"In the grid on the right, when the viewport width is 700 pixels or less, the number of columns changes from 2 to 3, the advert area occupies the top row, and div with the class d3 moves to the top corner of the grid.",
"

---

",
"When the viewport width is smaller or equal to 300 pixels, change the number of columns to one, and move the advert area to the second row."

Reduce repetition using the repeat function.

"In the grid-template-columns and grid-template-rows properties, if you wish to repeat certain values more than once you could use the repeat function by specifying the number of times you would like them to be repeated followed by a comma and the values to be repeated."
"On the right example we have the following:",
"grid-template-columns: repeat(2, 1fr 50px) 20px;",
"Which translates to grid-template-columns: 1fr 50px 1fr 50px 20px;",
"Note that 1fr 50px is repeated the number of times specified, followed by 20px",
"

---

",
"Using the repeat function, remove repetition from the grid-template-columns property."

comment: grid-template-columns: 30px 1fr auto 1fr auto;

Limit the size of each item using the minmax function

"To limit the change in size of an item when the container changes size, use the minmax function to specify the acceptable range for the size of your item. Here is an example:",
"grid-template-columns: 100px repeat(2, minmax(400px, 10%));",
"In the code above, the grid-template-columns is set to create three columns. The first column is 100 pixels, the following two columns have the minimum width of 400 pixels and the maximum width of 10% of the container.",
"

---

",
"Using the grid-template-columns property along with the minmax and repeat functions, create a column that has the minimum size of 300 pixels and the maximum size of 1fr and repeats two times."

Create implicit layouts using auto-fill and auto-fit

"The repeat function comes with auto-fill and auto-fit keywords which allow you to automatically insert as many tracks of your desired size as possible depending on the size of the container. You can create flexible layouts when combining the two with the minmax function. Resize the right container to see these two keywords in action.
In the right example, the grid-template-columns is set to repeat(auto-fill, minmax(50px, 1fr));
This keeps inserting 50px tracks and stretching them until it can insert another track.",
"Note, the only difference between these two is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty tracks and pushing your items to the side while
auto-fit collapses those empty tracks and stretches your items to fit the container.",
"

---

",
"Modify the grid-template-columns property so that it keeps the number of tracks flexible using auto-fit. The width of each track should be between 10px and 1fr."

Create grids within grids

"Turning a container element into a grid only affects the behavior of its direct descendants. Therefore, by turning a direct descendant into a grid you can have a grid within a grid.",

"As demonstrated on the right, setting the display and grid-template-columns properties of the element with the d3 class and its parent, you can have a grid that contains another grid.",

"

---

",

"Turn the element with the class d4 into a grid with two columns by setting its display property to grid and its grid-template-columns to 1fr 1fr."

[moT01]

Oh, by the way - I moved the align challenge up one spot - I thought it went better there... and I had a reason but I ended up not doing it - I was going to put something in the areas challenge like similar to the previous challenge - so If you want to move it back, go ahead - or if want me to do anything else, let me know

[moT01]

@ahmadabdolsaheb @QuincyLarson @raisedadead I took the time to revise the challenges and changed some things based on the advice. Looking for some feedback, this is what I came up with...

Intro

[
"",
"CSS Grid helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid.",
""
]

Create your first CSS Grid

[
"Turn any HTML element into a grid container by setting its display property to grid. This gives you the ability to use all the other properties associated with CSS Grid.",
"Note
In CSS Grid, the parent element is referred to as container and its children are called items.",
"

---

",
"Change the display of the div with the container class to grid."
]

Adjust the number of columns on a grid

[
"Simply creating a grid element doesn't get you very far. You need to define the structure of the grid, as well. To add some columns to the grid, use the grid-template-columns property on a grid container, as demonstrated below:",
"

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

",
"This will give your grid two columns that are 50 pixels wide each.",
"The number of parameters given to the grid-template-columns property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.",
"

---

",
"Give the grid container on the right 3 columns that are 100 pixels wide each."
]

Adjust the number of rows on a grid

[
"By default, the grid you created in the last challenge will contain one row. To add more rows, use the grid-template-rows property in the same way that you used grid-template-columns in previous challenge.",
"

---

",
"Add four rows to the grid on the right that are 50 pixels tall each."
]

Use CSS Grid units to change the size of columns and rows

[
"You can use absolute and relative units that you're probably familiar with like px and em to define the size of rows and columns. CSS Grid accepts other units as well:",
"fr: sets the size of a track to a fraction of the available space,",
"auto: sets the size of the track to the width or height of its content automatically,",
"%: adjusts the size of the track to the specified percent width of its container.",
"Here's the code that generates the output in the preview:",
"

grid-template-columns: auto 10px 5% 2fr 1fr;

",
"This snippet creates five columns. The width of the first column is as wide as its content. The width of the second column is 10 pixels. The width of the third column is 5% of the width of the container it's in. For the last two columns, the available space is divided into three sections, two of which are allocated for the forth column, and the rest for the fifth column.",
"

---

",
"Make a grid with three rows whose heights are as follows: 1 fraction of available space, 100 pixels, 2 fractions of available space."
]

Create a column gutter using grid-column-gap

[
"So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a margin in between the columns. In CSS Grid we call this a gutter. To add a gutter between the columns, use the grid-column-gap property like this:",
"

grid-column-gap: 10px;

",
"This creates 10 pixels of empty space between all of our columns.",
"

---

",
"Give the columns in the grid on the right a 20 pixel gutter."
]

Create a row gutter using grid-row-gap

[
"You can add a gutter in between the rows of a grid using the grid-row-gap property in the same way that you added a gutter in between columns in the previous challenge.",
"

---

",
"In the editor pane on the right, create a gutter for the rows that is 5 percent of the width of the grid."
]

Add gutters faster with grid-gap

[
"grid-gap is a shorthand property for the grid-row-gap and grid-column-gap properties you learned in the previous two challenges and it's often more convenient to use. If grid-gap has one value, it will a create a gutter between all rows and columns of the value given. However, if there are two values, it will use the first one to set the gutter between the rows and the second value for the gutter between the columns.",
"

---

",
"Using the grid-gap property, introduce a 5 percent gutter between the rows and 20 pixel gutter between the columns."
]

Use grid-column to control spacing

[
"Up to this point, all the properties that have been discussed are for use on grid containers. The grid-column property is the first one you will use on the grid items themselves.",
"The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.",
"To control the amount of columns an item will consume, you can use the grid-column property in conjunction with the line numbers you want the item to start and stop at.",
"Here's an example:",
"

grid-column: 1 / 3;

",
"This will make an item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.",
"

---

",
"In the editor pane, make the item with the class item1 consume the last two columns of the grid."
]

Use grid-row to control spacing

[
"Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the grid-row property on a grid item.",
"

---

",
"In the editor pane, make the element with the class item2 consume the first two rows."
]

Align horizontally using the justify-self property

[
"In CSS Grid, the content of each child element is located in a box which is referred to as a cell. You can adjust the content's position within its cell horizontally using the justify-self property on a grid item. By default, this property has a value of stetch, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:",
"start: aligns the content at the left of the cell,",
"center: aligns the content in the center of the cell,",
"end: aligns the content at the right of the cell.",
"

---

",
"In the editor pane, change the justify-self property to center the item with the class item2 horizontally. The item has a border so you can better see how the item behaves."
]

Align vertically using the align-self property

[
"Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you will use the align-self property, which will accept any of the same values that justify-self can use from the last challenge.",
"

---

",
"Align the item with the class item3 vertically at the bottom."
]

Align all items horizontally

[
"Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all horizontally at once by applying the justify-items property your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move all the items in our grid to the desired alignment.",
"

---

",
"Use this property to center all our items horizontally."
]

Align all items vertically

[
"Using the align-items property on a grid container will set the vertical alignment for all the items in our grid.",
"

---

",
"Use it now, in the editor pane, to move all the items to the bottom of each cell."
]

Divide the grid into an area template

[
"To remove the complexities from the grid, you can group and name cells of the grid using grid-template-areas on the container in the following manner:",
"

grid-template-areas: \"header header header\"
\"advert content content\"
\"footer footer footer\";

",
"This gives the cells labels that we can now reference later. In this case, the code above groups the top three cells and names it header, the bottom three cells are grouped and named footer, the left cell in the middle row is labeled as advert and the rest of the cells in the middle row are labeled as content.",
"Note
Every word represents a cell and every pair of quotation marks represent a row.",
"In addition to custom labels, you can put a period(.) in the grid-template-areas property to designate an empty cell on the grid.",
"Also, you can name your areas anything you want",
"

---

",
"Change the area template on the right so that the cell named advert becomes an empty cell."
]

Grid area: part 1

[
"After creating an areas template for your grid container, as shown in the previous challenge, you need a way to tell the grid what items to put in those areas. To do this, you use the grid-area property on an item like this:",
"

.item1 { grid-area: header };

",
"This lets the grid know that you want the element with the item1 class to go in the area with the header label. In this case, the item will use the entire top row because that whole row is set as the header.",
"

---

",
"Add an item in the footer area and give it a lime background-color.
]

Grid area: part 2

[
"The grid-area property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, we can create an area on the fly for our item to be placed like this:",
"

item1 { grid-area: 1/1/2/4; }

",
"This is using the line numbers we learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:",
"

grid-area: row to start at / column to start at / row to end at / column to end at;

",
"So the area in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.",
"

---

".
"Change the code on the right so that the content class consumes the last two columns in the middle row."
]

Reduce repetition using the repeat function

[
"When you used grid-template-columns and grid-template-rows to define the structure of a grid, you entered each column and row value into their respective properties to create each individual column and row. So when you made three columns, you entered three values for grid-template-columns.",
"Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you would your column or row to be repeated, followed by a comma and the value you want to repeat.",
"Here's an example that would create the 100 row grid, each at 50 pixels tall.",
"

grid-template-rows: repeat(100, 50px);

",
"You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining our grid structure. Here's what I mean:",
"

grid-template-columns: repeat(2, 1fr 50px) 20px;

",
"This translates to:",
"

grid-template-columns: 1fr 50px 1fr 50px 20px;

",
"Note
1fr 50px is repeated twice followed by 20px.",
"

---

",
"On the right, use the repeat function to remove repetition from the grid-template-columns property."
]

Limit item size using the minmax function

[
"There's another built-in function to use with grid-template-columns and grid-template-rows called minmax. It's used to limit the change in size of an item when a grid container changes size. To do this you need to specify the acceptable range for the size of your item. Here is an example:",
"

grid-template-columns: 100px minmax(50px, 200px);

",
"In the code above, grid-template-columns is set to create three columns; the first is 100 pixels wide, and the second has the minimum width of 50 pixels and the maximum width of 200px.",
"

---

",
"Using minmax function, add a column to the grid-template-columns property on the right that has the minimum size of 15 pixels and the maximum size of 2fr",
"Note
minmax can be used in conjunction with repeat like this:",
"

repeat(2, minmax(20px, 50%))

"
]

Create implicit layouts using auto-fill and auto-fit

[
"The repeat function comes with auto-fill and auto-fit keywords which allow you to automatically insert as many tracks of your desired size as possible depending on the size of the container. You can create flexible layouts when combining one of these two with the minmax function. Resize the container on the right to see these two in action.",
"In the right example, grid-template-columns is set to repeat(auto-fill, minmax(50px, 1fr)); This keeps inserting 50px tracks and stretching them until it can insert another track. The only difference between these two is that, when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty tracks and pushing your items to the side while
auto-fit collapses those empty tracks and stretches your items to fit the container.",
"

---

",
"

some challenge here

"
]

Use media queries to create responsive layouts

[
"CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items to make your design more flexible.",
"In the preview, when the viewport width is 700 pixels or less, the number of columns changes from 2 to 3. The advertisement area then occupies the top row, and the div with the class item3 moves to the top corner of the grid.",
"

---

",
"Add a media query so that whenever the viewport width is 300 pixels or less, the number of columns changes to one, and the advertisement area moves to the second row."
]

Create grids within grids

[
"Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you then have a grid within a grid.",
"As you can see in the preview, setting the display and grid-template-columns properties of the element with the item3 class, you can have a grid that contains another grid.
"

---

",
"Turn the element with the class item4 into a grid with two columns by setting its display property to grid and its grid-template-columns property to 1fr 1fr."
]

[ahmadabdolsaheb]

@moT01 thanks a lot for the going through the challenges, splitting them and making them much smoother. Please use my bolded modifications as a reference only, and change them as needed. I look forward to your final draft for finishing the challenges.

Intro
[ "", "CSS Grid helps you easily build complex web designs. It works by turning an HTML element into a grid container with rows and columns for you to place children elements where you want within the grid.", "" ]
Create your first CSS Grid
[ "Turn any HTML element into a grid container by setting its display property to grid. This gives you the ability to use all the other properties associated with CSS Grid.", "Note
In CSS Grid, the parent element is referred to as container and its children are called items.", "
", "Change the display of the div with the container class to grid." ]
Adjust the number of columns on a grid
[ "Simply creating a grid element doesn't get you very far. You need to define the structure of the grid, as well. To add some columns to the grid, use the grid-template-columns property on a grid container, as demonstrated below:", "
.container {
display: grid;
grid-template-columns: 50px 50px;
}
", "This will give your grid two columns that are 50 pixels wide each.", "The number of parameters given to the grid-template-columns property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.", "
", "Give the grid container on the right 3 columns that are 100 pixels wide each." ]
Adjust the number of rows on a grid
[ "By default, __the grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually,__ use the grid-template-rows property in the same way that you used grid-template-columns in previous challenge.",
__Note: the rows and columns are referred to as tracks in CSS grid__ "
", "Add four rows to the grid on the right that are 50 pixels tall each." ]
Use CSS Grid units to change the size of columns and rows
[ "You can use absolute and relative units that you're probably familiar with like px and em to define the size of rows and columns. CSS Grid accepts other units as well:", "fr: sets the size of a track to a fraction of the available space,", "auto: sets the size of the track to the width or height of its content automatically,", "%: adjusts the size of the track to the specified percent width of its container.", "Here's the code that generates the output in the preview:", "
grid-template-columns: auto 10px 5% 2fr 1fr;
", "This snippet creates five columns. The width of the first column is as wide as its content. The width of the second column is 10 pixels. The width of the third column is 5% of the width of the container it's in. For the last two columns, the available space is divided into three sections, two of which are allocated for the forth column, and the rest for the fifth column.", "
", "Make a grid with three rows whose heights are as follows: 1 fraction of available space, 100 pixels, 2 fractions of available space." ]
Create a column gutter using grid-column-gap
[ "So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a__n empty space__ in between the columns. In CSS Grid we call this a __gap__. To add a __gap__ between the columns, use the grid-column-gap property like this:", "
grid-column-gap: 10px;
", "This creates 10 pixels of empty space between all of our columns.", "
", "Give the columns in the grid a 20 pixel gutter." ]
Create a row gutter using grid-row-gap
[ "You can add a gutter in between the rows of a grid using the grid-row-gap property in the same way that you added a gutter in between columns in the previous challenge.", "
", "~In the editor pane on the right~ create a gutter for the rows that is 5 percent of the width of the grid." ]
Add gutters faster with grid-gap
[ "grid-gap is a shorthand property for the grid-row-gap and grid-column-gap properties you learned in the previous two challenges and it's often more convenient to use. If grid-gap has one value, it will a create a gutter between all rows and columns of the value given. However, if there are two values, it will use the first one to set the gutter between the rows and the second value for the gutter between the columns.", "
", "Using the grid-gap property, introduce a 5 percent gutter between the rows and 20 pixel gutter between the columns." ]
Use grid-column to control spacing
[ "Up to this point, all the properties that have been discussed are for use on grid containers. The grid-column property is the first one you will use on the grid items themselves.", "The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.", "To control the amount of columns an item will consume, you can use the grid-column property in conjunction with the line numbers you want the item to start and stop at.", "Here's an example:", "
grid-column: 1 / 3;
", "This will make an item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.", "
", "In the editor pane, make the item with the class item1 consume the last two columns of the grid." ]
Use grid-row to control spacing
[ "Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the grid-row property on a grid item.", "
", "In the editor pane, make the element with the class item2 consume the first two rows." ]
Align __an item__ horizontally using the justify-self property
[ "In CSS Grid, the content of each child element is located in a box which is referred to as a cell. You can adjust the content's position within its cell horizontally using the justify-self property on a grid item. By default, this property has a value of stetch, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:", "start: aligns the content at the left of the cell,", "center: aligns the content in the center of the cell,", "end: aligns the content at the right of the cell.", "
", "In the editor pane, change the justify-self property to center the item with the class item2 horizontally. The item has a border so you can better see how the item behaves." ]
Align __an item__ vertically using the align-self property
[ "Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you will use the align-self property, which will accept any of the same values that justify-self can use from the last challenge.", "
", "Align the item with the class item3 vertically at the bottom." ]
Align all items horizontally
[ "Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all horizontally at once by applying the justify-items property your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move all the items in our grid to the desired alignment.", "
", "Use this property to center all our items horizontally." ]
Align all items vertically
[ "Using the align-items property on a grid container will set the vertical alignment for all the items in our grid.", "
", "Use it now, in the editor pane, to move all the items to the bottom of each cell." ]
Divide the grid into an area template
[ "To remove the complexities from the grid, you can group and name cells of the grid __anything you want__ using grid-template-areas on the container in the following manner:", "
grid-template-areas: \"header header header\"
\"advert content content\"
\"footer footer footer\";
", "This gives the cells labels that we can now reference later. __In this case, the code above labels the top three cells and header, the bottom three cells footer, the left cell in the middle row advert and the rest of the cells in the middle row content.__", "Note
Every word represents a cell and every pair of quotation marks represent a row.", "In addition to custom labels, you can put a period(.) in the grid-template-areas property to designate an empty cell on the grid.", Also, you can name your areas anything you want"
", "Change the area template on the right so that the cell named advert becomes an empty cell." ]
__Place items in Grid Areas Using the grid-area property__
[ "After creating an areas template for your grid container, as shown in the previous challenge, you need a way to tell the grid what items to put in those areas. To do this, you use the grid-area property on an item like this:", "
.item1 { grid-area: header };
", "This lets the grid know that you want the element with the item1 class to go in the area with the header label. In this case, the item will use the entire top row because that whole row is set as the header.", "
", "Add an item in the footer area and give it a lime background-color. ]
__Place Items in the Grid Using the in grid-area Property without Areas Template Setup__
[ "The grid-area property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, we can create an area on the fly for our item to be placed __in__ like this:", "
item1 { grid-area: 1/1/2/4; }
", "This is using the line numbers we learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:", "
grid-area: row to start at / column to start at / row to end at / column to end at;
", "So the area in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.", "
". "__Modify the grid-area property__ ~~ code on the right~~ __so that the content class consumes the last two columns in the middle row." ]
Reduce repetition using the repeat function
[ "When you used grid-template-columns and grid-template-rows to define the structure of a grid, you entered each column and row value into their respective properties to create each individual column and row. So when you made three columns, you entered three values for grid-template-columns.", "Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you would your column or row to be repeated, followed by a comma and the value you want to repeat.", "Here's an example that would create the 100 row grid, each at 50 pixels tall.", "
grid-template-rows: repeat(100, 50px);
", "You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining our grid structure. Here's what I mean:", "
grid-template-columns: repeat(2, 1fr 50px) 20px;
", "This translates to:", "
grid-template-columns: 1fr 50px 1fr 50px 20px;
", "Note
1fr 50px is repeated twice followed by 20px.", "
", "~On the right~ Use the repeat function to remove repetition from the grid-template-columns property." ]
Limit item size using the minmax function
[ "There's another built-in function to use with grid-template-columns and grid-template-rows called minmax. It's used to limit the change in size of an item when a grid container changes size. To do this you need to specify the acceptable range for the size of your item. Here is an example:", "
grid-template-columns: 100px minmax(50px, 200px);
", "In the code above, grid-template-columns is set to create three columns; the first is 100 pixels wide, and the second has the minimum width of 50 pixels and the maximum width of 200px.",
""Note: minmax can also be used in conjunction with repeat like this:", "
"repeat(2, minmax(20px, 50%))"
", "Using minmax function, add a column to the grid-template-columns property on the right that has the minimum size of 15 pixels and the maximum size of 2fr", ~Note
minmax can be used in conjunction with repeat like this:", "
repeat(2, minmax(20px, 50%))~
" ]
__Create _flexible_ layouts using auto-fill
[ "The repeat function comes with the auto-fill keyword which allows you to automatically insert as many tracks of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill with the minmax function. Resize the container on the right to see it in action.", "In the right example, grid-template-columns is set to repeat(auto-fill, minmax(50px, 1fr)); When the container change in size, this setup keeps inserting 50px tracks and stretching them until it can insert another track. ",
"

---

",
"Set the grid-template-columns property of the second grid container to a repeat function with auto-fill. The width of each track should be minimum of 60px, and maximum 1fr."
[
Create _flexible_ layouts using auto-fit
[ " auto-fit function works similarly to the auto-fill function.The only difference between these two is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty tracks in the grid and pushs your items to the side while auto-fit collapses those empty tracks and stretches your items to fit the size of the container.", "See the difference between two in the preview",
"hr",
"For the second grid, set the repeat function of the grid-template-columns to auto-fit with minimum width of 60 and maximum width of 1fr"
]__
some challenge here
" ]
Use media queries to create responsive layouts
[ "CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items~to make your design more flexible~", "In the preview, when the viewport width is 700 pixels or less, the number of columns changes from 2 to 3. The advertisement area then occupies the top row, and the div with the class item3 moves to the top corner of the grid.", "
", "Add a media query so that whenever the viewport width is 300 pixels or less, the number of columns changes to one, and the advertisement area moves to the second row." ]
Create grids within grids
[ "Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you then have a grid within a grid.", "As you can see in the preview, setting the display and grid-template-columns properties of the element with the item3 class, you can have a __parent grid container_ that contains another grid. "
", "Turn the element with the class item4 into a grid with two columns by setting its display property to grid and its grid-template-columns property to 1fr 1fr." ]

[QuincyLarson]

@ahmadabdolsaheb Did you see my suggested edits as well? I submitted mine just a few minutes before @moT01 did.

[ahmadabdolsaheb]

Yes @quincylarson. @moT01 combined your suggestions in his second draft. It would be great if you could quickly go though the final verson and let us know if you have any suggestions before we post the final draft. : )

[QuincyLarson]

@ahmadabdolsaheb This looks great. I would remove the "Note: the rows and columns are referred to as tracks in CSS grid" and the other two mentions of "tracks" since this is jargon and we don't want to overload the learner with jargon.

[moT01]

@QuincyLarson thanks, we will take that as; the challenges are close enough to final, that we can start writing the challenge seed code. @ahmadabdolsaheb Let me know if you want help doing that - Ill make those last few mods to the descriptions and hopefully they will be finished. Ill post a link.

[moT01]

@ahmadabdolsaheb alright, I'm pretty satisfied - the formatting should be correct I think - change anything as you see fit.
grid challenges

[QuincyLarson]

@ahmadabdolsaheb @moT01 OK - great! Which of you is going to add these to the seed file? Excited to have coverage of these!

Also, since you're updating this, would you be interested in also adding a few challenges about CSS variables to the end of the basic CSS section? They are new, but they're widely supported by browsers. Here's an article we recently published on them: https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855

[ahmadabdolsaheb]

@quincylarson The json file is ready. I will add it today. I could definitely look into the CSS variables challenges. Also, any plans on adding react native?

[raisedadead]

Also, any plans on adding react native?

Yes, but probably not very soon.. we need to have testable platform for that. We are limited to the browser for now.

[ahmadabdolsaheb]

@QuincyLarson, PR ready.
@raisedadead if you come across something that has a potential to be used for future react native challenges, could you please let me know.
@moT01 thank you for all the help.

[huyenltnguyen]

@ahmadabdolsaheb I just saw your PR and came here to say thank you for the great work. CSS Grid is on my to-learn list, so I'm really looking forward to playing with those challenges (and QA'ing them, too) once they get merged. 😄

[ahmadabdolsaheb]

Thank you @huyenltnguyen : ). The CSS Grid Challenges would have not been possible without @moT01 who did most of the work. I hope you enjoy them.

[huyenltnguyen]

@moT01 Yes, thank you, too! Sorry, I saw the PR and was so exited that I didn't even scroll up this thread to read all the discussion 😅 Great work guys!