Grid Item

Grid items can be placed into a precise location on the grid using line numbers, names or by targeting an area of the grid. Grid also contains an algorithm to control the placement of items not given an explicit position on the grid.

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 25px;
  font-size: 35px;
}

Grid Item-properties

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 15px;
  background-color: yellow;
  padding: 15px;
}

Grid Item-values

• <line> – It can be a number to refer to a numbered grid line, or a name to refer to a named grid line
• span <number> - By using this value the item will span across the provided number of grid tracks
• span <name> – By using this value the item will span across until it hits the next line with the provided name
• auto – By using this value it indicates auto-placement, an automatic span, or a default span of one

Naming Grid Item

an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  grid-gap: 15px;
  background-color: red;
  padding: 15px;
}