grid callenges solved

Walkthrough and solutions

 

-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)

 

Create Your First CSS Grid

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

angelThe solution → display: grid;

 

Add Columns with grid-template-columns

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

angelThe solution → grid-template-columns: 100px 100px 100px

 

Add Rows with grid-template-rows

enlightenedTo adjust the rows manually, use the grid-template-rows property in the same way you used grid-template-columns

angelThe solution → grid-template-rows: 50px 50px

 

Use CSS Grid units to Change the Size of Columns and Rows

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

angelThe solution → grid-template-columns: 1fr 100px 2fr

 

Create a Column Gap Using grid-column-gap

enlightenedTo add a gap between the columns, use the grid-column-gap.

angelThe solution →  grid-column-gap: 20px

 

Create a Row Gap using grid-row-gap

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

angelThe solution → grid-row-gap: 5px

 

Add Gaps Faster with grid-gap

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

angelThe solution → grid-gap: 10px 20px

 

You can also watch the video where I talk and code the grid challenges up to this point.

 

Use grid-column to Control Spacing

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

angelThe solution → grid-column: 2/4

 

Use grid-row to Control Spacing

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

angelThe solution → grid-row: 2/4

 

Align an Item Horizontally using justify-self

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

angel The solution → justify-self: center

 

Align an Item Vertically using align-self

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

angelThe solution →  justify-self: end

 

Align All Items Horizontally using justify-items

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

angelThe solution → justify-items: center

 

Align All Items Vertically using align-items

enlightenedUsing the align-items property on a grid container will set the vertical alignment for all the items in our grid.

angelThe solution → align-items: end

 

You can also watch the video where I talk and code the grid challenges up to this point.

 

Divide the Grid Into an Area Template

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

angelThe solution → instead of “adverd” use the dot (.)

 

Place Items in Grid Areas Using the grid-area Property

enlightenedAfter 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

angelThe solution → grid-area: footer

 

Use grid-area Without Creating an Areas Template

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

angelThe solution → grid-area: 3/1/4/4

 

You can also watch the video where I talk and code the grid challenges up to this point.

 

Reduce Repetition Using the repeat Function

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

angelThe solution → grid-template-columns: repeat(3, 1fr)

 

Limit Item Size Using the minmax Function

enlightenedThere'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.

angelThe solution → grid-template-columns: repeat(3, minmax(90px, 1fr))

 

Create Flexible Layouts Using auto-fill

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

angelThe solution → grid-template-rows: repeat(auto-fill, minmax(60px, 1fr))

 

Create Flexible Layouts Using auto-fit

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

angelThe solution → grid-template-columns: repeat(auto-fit, minmax(60px, 1fr))

 

You can also watch the video where I talk and code the grid challenges up to this point.

 

Use Media Queries to Create Responsive Layouts

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

angelThe solution →

grid-template-areas:
“header header”
“adverd content”
“footer footer”
 

Create Grids within Grids

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

angelThe solution →

display: grid
grid-template-columns: auto 1fr
 

You can also watch the last part of the video series where I talk and code the grid challenges.

 

Are you still here?! Well, if you are congratulations! You just finished the grid challenges by freecodecamp!

Disclaimer:  Grid definitions are by freecodecamp.org