CSS Grid Container | html gridview w3schools
TryitYourself»[1] GridContainerTomakeanHTMLelementbehaveasagridcontainer,youhavetosetthedisplaypropertytogridorinline-grid.Gridcontainersconsistofgriditems,placedinsidecolumnsandrows.Thegrid-template-columnsPropertyThegrid-template-columnspropertydefinesthe numberofcolumnsinyourgridlayout,anditcandefinethewidthofeachcolumn.Thevalueisaspace-separated-list,whereeachvaluedefinesthewidth oftherespectivecolumn.Ifyouwantyourgridlayouttocontain4columns,specifythewidthofthe4columns,...
Try it Yourself »[1]
Grid ContainerTo make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid.
Grid containers consist of grid items, placed inside columns and rows.
The grid-template-columns PropertyThe grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.
The value is a space-separated-list, where each value defines the width of the respective column.
If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.
ExampleMake a grid with 4 columns:
.grid-container { display: grid; grid-template-columns: auto auto auto auto;}
Try it Yourself »[2]
Note: If you have more than 4 items in a 4 columns grid, the grid will automatically ...