# freeCodeCamp Challenge Guide: Use CSS Grid units to Change the Size of Columns and Rows

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-css-grid-units-to-change-the-size-of-columns-and-rows/301134>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 5:40am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-css-grid-units-to-change-the-size-of-columns-and-rows/301134 "2019-08-03T05:40:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 3, 2019, 5:40am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-css-grid-units-to-change-the-size-of-columns-and-rows/301134/1 "2019-08-03T05:40:46Z")

</div>

# [Use CSS Grid Units to Change the Size of Columns and Rows](https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows)

* * *

## Problem Explanation

This challenge requires you to set the width of the columns of the container to the ones as specified in the challenge description.

* * *

## Hints

### Hint 1

Change the `grid-template-columns` property.

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> Since the challenge requires you to set the width to `1fr`, `100px`, and `2fr`, change the `css grid-template-columns` property of `.container` to:
> 
> ```css
> grid-template-columns: 1fr 100px 2fr;
> 
> ```
> 
> #### Relevant Links
> 
> - [An Introduction to the fr CSS unit - CSS tricks](https://css-tricks.com/introduction-fr-css-unit/)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:59pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-use-css-grid-units-to-change-the-size-of-columns-and-rows/301134/2 "2025-01-08T15:59:18Z")

</div>

Closed on January 8, 2025, 3:59pm UTC