CSS Tutorial : grid system

Part 1 display: grid

1.1 grid-template-columns

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    padding: 1em;
}
Try It Yourself

Note: The grids are evenly spaced

1.2 centering content of child

.parent > * {
  display: flex;
}
Try It Yourself

Note:

Part 2 repeat()

2.1

.parent {
  grid-template-columns: repeat( 6, 1fr);
}
Try It Yourself

Note: Repeating for six times

2.2 two short and one wide

repeat(2, 50px) 100px;
Try It Yourself

Note: This is the same as 50px, 50px, 100px.

2.3 the wide one stretched

repeat(2, 50px) minmax(100px, 1fr);
Try It Yourself

Note: minmax() is a useful function, especially one of the argument is 1fr.

Part 3 Responsive Design

3.1 auto-fill

repeat(auto-fill, minmax(50px, 1fr) );
Try It Yourself

Note: This will generate columns based on screen width.