CSS: Grid

-

A grid-based layout system, with rows and columns. Like tables, grid layout enables an author to align elements into columns and rows.
-
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

-
Many more layouts are either possible or easier with CSS grid than they were with tables.

For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
-
easier to design web pages without having to use floats and positioning.

-
An HTML element becomes a grid container when its display property is set to grid or inline-grid.

 

 

1. You can adjust the gap size by using one of the following properties:
   - grid-column-gap
   - grid-row-gap
   - grid-gap

 

2. Place a grid item at column line 1, and let it end on column line 3

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

: combination with 'grid-row-start' and 'grid-row-end' can change the location of the item.
: shorten version

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;

---

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

CSS Grid Layout

https://www.w3schools.com/css/css_grid.asp

CSS Grid Layout