Is it necessary to define the width of a container when using CSS Grid?

1

I’m trying to learn CSS Grid. I know in order to use CSS Grid I need to set the display of the container to grid. Do I also need to define its width? I’m following this example which sets the width to 100%:

.projects-grid {
  display: grid;
  grid-template-columns: 100px 100px;
  width: 100%;
}

What is 100% referring to? 100% of the page, or the container? Thanks

2

Does anyone know if it’s necessary to define the width, and what 100% refers to? Thanks

3

Why not write a simple code where you give yourself the task of using the width 100% and change it a few times to 60% 50% and see what it does? If you still have questions afterwards i be here to help :3

1 Like
4

Depends really on the intent. Usually not.
100% means 100 percent of the width of its parent.

You can experiment, don’t be afraid to mess it up! :smiley:

Try,

  1. Setting it to background: red
  2. Adjusting the width to other percent. 50%,80%, etc…, as what @KittyKora have said
1 Like
5

Thank you! Yes I’ve been experimenting with it, just wanted to know what the 100% was in reference to and if it is required or not… Thanks again