YouTip

!(#) [Try it yourself »](#) * * * ## Grid Container To make an HTML element a grid container, you can set the **display** property to grid or inline-grid. The grid container contains grid elements consisting of columns and rows. ### The grid-template-columns Property The grid-template-columns property defines the number of columns in the grid layout, and it can also set the width of each column. The property value is a space-separated list, where each value defines the width of the corresponding column. If you want the grid layout to contain 4 columns, you need to set the width of 4 columns. If all columns have the same width, you can set it to auto. The following example sets a grid layout with 4 columns: ## Example .grid-container{display:grid; grid-template-columns:auto auto auto auto; } [Try it yourself »](#) **Note:** If you have more than 4 grid elements in a 4-column grid, the grid layout will generate a new row to place the element. The grid-template-columns property can also be used to specify the width of columns. ## Example .grid-container{display:grid; grid-template-columns:80 px 200 px auto 40 px; } [Try it yourself »](#) ### The grid-template-rows Property The grid-template-rows property sets the height of each row. The property value is a space-separated list, where each value defines the height of the corresponding row: ## Example .grid-container{display:grid; grid-template-rows:80 px 200 px; } [Try it yourself »](#) ### The justify-content Property The justify-content property is used to align the grid within the container, setting how to distribute space between and around grid items along the main axis (or grid row axis) of the flex container. **Note:** The total width of the grid must be less than the width of the container for the justify-content property to take effect. > **justify-content** detailed reference: (#) ## Example .grid-container{display:grid; justify-content:space-evenly; } [Try it yourself »](#) ## Example .grid-container{display:grid; justify-content:space-around; } [Try it yourself »](#) ## Example .grid-container{display:grid; justify-content:space-between; } [Try it yourself »](#) ## Example .grid-container{display:grid; justify-content:center; } [Try it yourself »](#) ## Example .grid-container{display:grid; justify-content:start; } [Try it yourself »](#) ## Example .grid-container{display:grid; justify-content:end; } [Try it yourself »](#) ### The align-content Property The align-content property is used to set the alignment of grid items in the vertical direction within the container. **Note:** The total height of the grid must be less than the height of the container for the align-content property to take effect. ## Example .grid-container{display:grid; height:400 px; align-content:center; } [Try it yourself »](#) ## Example .grid-container{display:grid; height:400 px; align-content:space-evenly; } [Try it yourself »](#) ## Example .grid-container{display:grid; height:400 px; align-content:space-around; } [Try it yourself »](#) ## Example .grid-container{display:grid; height:400 px; align-content:space-between; } [Try it yourself »](#) ## Example .grid-container{display:grid; height:400 px; align-content:start; } [Try it yourself »](#) ## Example .grid-container{display:grid; height:400 px; align-content:end; } [Try it yourself »](#)