Do I need to explicitly set width and height to the container if I am using grid or flexbox?

I was trying to give the height of my container div but got confused if I should skip that since grid can handle it for me in the grid-template-columns and grid-template-rows properties.

CodePudding user response：

If you are using the grid layout, you do not need to set the width and height of the container explicitly. The grid-template-columns and grid-template-rows properties allow you to define the number of columns and rows in the grid, as well as their size. You can also use the grid-template-areas property to define the layout of the grid in a more visual way.

For example, to create a three-column grid with columns of equal width, you could use the following code:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns, each with a width of 1 fraction unit */
}

If you want to specify the height of the container, you can do so using the height property. However, it's important to note that the height of the container will only be respected if the content inside the container is smaller than the specified height. If the content overflows the container, it will expand to fit the content.

In the case of the flexbox layout, you also do not need to set the width and height of the container explicitly. The flexbox layout is designed to automatically adjust the size of the container to fit its content. However, you can use the flex-wrap property to control whether the flex items should wrap onto multiple lines if the container is not large enough to fit them all on one line.