GRID

Display: grid

Grid layout enables the alignment elements into columns and rows.

This makes the children of a containing element take up the full height of the container equally(depending).

For instance, if a container has a height of

   height: 300px;

while the children, a height of

   height: 100px; /* (in  total) and  */

the children will share the remaining 200px among them selves equally as spaces

Display: inline-grid

This is similar to grid. The difference is

• Its inline. It takes the width of the content. Extra width is left for other elements to.

eg. if the width of a content is 200px, the container will cover it up leaving the remaining space around it for other elements.

Note

• The vertical line of grid items are called columns.
• The horizontal line of grid items are called rows.
• The space between each column/row are called gaps.

grid-template-columns

defines the number of columns in your grid layout, and it can define the width of each column.

Tips

• value is a space-separated-list, where each value defines the length of the respective column: and the number of values, the number of columns.

• You can choose to explicitly name the lines. Note, the bracket syntax for the line names:

• If your definition contains repeating parts, you can use the css repeat() notation to streamline things:

  .container {
  display: grid;
  border: 1px solid red;
  grid-template-columns: repeat(3, 100px)  /* This will create a 5 colums of size 100px */; /* This is equivalent to */grid-template-columns: 100px 100px 100px ;
  
  grid-template-columns: 50px repeat(5, 100px);  /* This will create a 6 colums with the first 50px and the remainng ones 100px */ /* This is equivalent to */ grid-template-columns: 50px 100px  100px 100px 100px 100px;
  }
  

• the names could be anything and can have more than one name.

  .container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  }
  .container {
  grid-template-columns: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
  }
  

  • The css fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

.container {
  display: grid;
  border: 1px solid red;
  grid-template-columns: 1fr 5fr 1fr; /* Th *is will create  3columns, where the first and last are the width and the second, times arger*/
}