Free Code Camp: CSS Grid Challenges
Walkthrough and solutions. This article will walk you through freecodecamp.org grid challenges
-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.- by FreeCodeCamp
You can find the grid challenges here
Let’s start!
You can also watch the video where I talk and code the first 7 grid challenges
💡 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.
✅ The solution → display: grid;
Add Columns with grid-template-columns
💡 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. 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.
✅ The solution → grid-template-columns: 100px 100px 100px
Add Rows with grid-template-rows
💡 To adjust the rows manually, use the grid-template-rows property in the same way you used grid-template-columns
✅ The solution → grid-template-rows: 50px 50px
Use CSS Grid units to Change the Size of Columns and Rows
💡 You can use absolute and relative units like px and em in CSS Grid to define the size of rows and columns. You can use these as well:
- fr: sets the column or row to a fraction of the available space,
- auto: sets the column or row to the width or height of its content automatically,
- %: adjusts the column or row to the percent width of its container.
✅ The solution → grid-template-columns: 1fr 100px 2fr
Create a Column Gap Using grid-column-gap
💡 To add a gap between the columns, use the grid-column-gap.
✅ The solution → grid-column-gap: 20px
Create a Row Gap using grid-row-gap
💡 You can add a gap in between the rows of a grid using grid-row-gap in the same way that you added a gap in between columns.
✅ The solution → grid-row-gap: 5px
💡 grid-gap is a shorthand property for grid-row-gap and grid-column-gap from the previous two challenges that’s more convenient to use. If grid-gap has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
✅ The solution → grid-gap: 10px 20px
You can also watch the video where I talk and code the next few grid challenges.
Use grid-column to Control Spacing
💡 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.
✅The solution → grid-column: 2/4
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.
✅ The solution → grid-row: 2/4
Align an Item Horizontally using justify-self
💡 In CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align 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 stretch, 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.
✅ The solution → justify-self: center
Align an Item Vertically using align-self
💡 Just as you can align an item horizontally, there’s a way to align an item vertically as well. To do this, you use the align-self property on an item. This property accepts all of the same values as justify-self.
✅ The solution → justify-self: end
Align All Items Horizontally using justify-items
💡 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 at once horizontally by using justify-items on your grid container.
✅ The solution → justify-items: center
Align All Items Vertically using align-items
💡 Using the align-items property on a grid container will set the vertical alignment for all the items in our grid.
✅ The solution → align-items: end
You can also watch the video where I talk and code the next few grid challenges.
Divide the Grid Into an Area Template
💡 You can group cells of your grid together into an area and give the area a custom name. Do this by using grid-template-areas.
Note: Every word in the code represents a cell and every pair of quotation marks represent a row. In addition to custom labels, you can use a period (.) to designate an empty cell in the grid.
✅ The solution → instead of “adverd” use the dot (.)
Place Items in Grid Areas Using the grid-area Property
💡 After creating an areas template for your grid container, you can place an item in your custom area by referencing the name you gave it. To do this, you use the grid-area
✅ The solution → grid-area: footer
Use grid-area Without Creating an Areas Template
💡 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, you can create an area on the fly for an item to be placed.
✅ The solution → grid-area: 3/1/4/4
You can also watch the video where I talk and code the next few grid challenges.
Reduce Repetition Using the repeat Function
💡 By using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
✅ The solution → grid-template-columns: repeat(3, 1fr)
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 size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item.
✅The solution → grid-template-columns: repeat(3, minmax(90px, 1fr))
Create Flexible Layouts Using auto-fill
💡 The repeat function comes with a option called auto-fill. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill with minmax.
Note: If your container can’t fit all your items on one row, it will move them down to a new one.
✅ The solution → grid-template-rows: repeat(auto-fill, minmax(60px, 1fr))
Create Flexible Layouts Using auto-fit
💡 auto-fit works almost identically to auto-fill. The only difference is that when the container’s size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.
Note: If your container can’t fit all your items on one row, it will move them down to a new one.
✅ The solution → grid-template-columns: repeat(auto-fit, minmax(60px, 1fr))
You can also watch the last part of the video series where I talk and code the grid challenges.
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.
✅ The solution →
grid-template-areas:
“header header”
“adverd content”
“footer footer”
💡 Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.
✅ The solution →
display: grid
grid-template-columns: auto 1fr
Are you still here?! Well, if you are, congratulations! You just finished the grid challenges by freecodecamp!
Disclaimer: Grid definitions are by freecodecamp.org
Would you like to get me a coffee?!☕️
You can do that here → paypal.me/eleftheriabatsou
But If you can’t, that’s ok too 😍.
