CSS Grid Container

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP




<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



CSS Grid Container



❮ Previous
Next ❯



1


2


3


4


5


6


7


8




Try it Yourself »




Grid Container


To 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 Property


The 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 length
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.




Example


Make a grid with 4 columns:



.grid-container

  display: grid;
 
grid-template-columns: auto auto auto auto;


Try it Yourself »





Note: If you have more than 4 items in a 4 columns grid, the grid will automatically
add a new row to put the items in.




The grid-template-columns property can also be used to specify the size (width) of the columns.




Example


Set a size for the 4 columns:



.grid-container

  display: grid;
 
grid-template-columns: 80px 200px auto 40px;


Try it Yourself »





The grid-template-rows Property


The grid-template-rows property defines the height of each row.



1


2


3


4


5


6


7


8




The value is a space-separated-list, where each value defines the the height of the respective row:




Example



.grid-container

  display: grid;
 
grid-template-rows: 80px 200px;


Try it Yourself »





The justify-content Property


The justify-content property is used to align the whole grid inside the container.



1


2


3


4


5


6




Note: The grid's total width has to be less than the container's width for the justify-content property to have any effect.





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
vertically
align the whole grid inside the container.





1


2


3


4


5


6






Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.





Example



.grid-container

  display: grid;
  height: 400px;
 
align-content: center;


Try it Yourself »





Example



.grid-container

  display: grid;
  height: 400px;
 
align-content: space-evenly;


Try it Yourself »





Example



.grid-container

  display: grid;
  height: 400px;
 
align-content: space-around;


Try it Yourself »





Example



.grid-container

  display: grid;
  height: 400px;
 
align-content: space-between;


Try it Yourself »





Example



.grid-container

  display: grid;
  height: 400px;
 
align-content: start;


Try it Yourself »





Example



.grid-container

  display: grid;
  height: 400px;
 
align-content: end;


Try it Yourself »






❮ Previous
Next ❯

Popular posts from this blog

WWE Night of Champions

Poznań

Kaliningrad