Css Programming Tutorials, Guides & Best Practices

• Grid Container: The element on which display: grid is applied. It becomes the parent of grid items.
• Grid Item: Direct children of the grid container.
• Grid Lines: Horizontal and vertical lines that divide the grid.
• Grid Track: The space between two grid lines, equivalent to rows or columns.
• Grid Cell: The smallest unit of a grid, the intersection of a row and a column.
• Grid Area: A rectangular area defined by four grid lines.

Named grid areas allow you to define a layout using human-readable names instead of relying solely on line numbers. This technique enhances readability and maintainability.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
}

.flex-item {
  background-color: lightgreen;
  padding: 10px;
  border: 1px solid #ccc;
}