CSS Grid Basics

CSS Grid lays out elements in rows and columns. Set display: grid on a container, then define the columns with grid-template-columns.

• grid-template-columns sets column tracks
• The fr unit shares leftover space
• gap adds spacing between cells

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}