Science Knowings: CSS Course For Social Media

CSS Grid Patterns

From Flexbox to Grids

We've explored CSS Flexbox, now let's dive into CSS Grids, a powerful layout system for creating flexible, complex layouts with greater control and precision.

Why Grid?

Grids offer advantages over traditional layouts:

  • Precise Control: Define the exact position and size of elements.
  • Responsive Layouts: Automatically adjust layouts based on screen size.
  • Modular Design: Create reusable grid templates for consistent and maintainable layouts.

Grid Terminology

Grid Container: The parent element that defines the grid layout.

Grid Item: The child element that is placed within the grid.

Grid Line: Vertical or horizontal lines that define the boundaries of grid cells.

Grid Cell: The area formed by the intersection of two grid lines.

Creating a Grid

To create a grid, use the display: grid; property on the container element and define the grid layout using the grid-template-columns and grid-template-rows properties.


.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}

Grid Lines

Grid lines are used to define the boundaries of grid cells. You can use the grid-gap property to specify the spacing between grid lines.


.grid-container {
  grid-gap: 10px;
}

Gaps

Gaps can be specified in two ways:

  • Grid Gap: Applies a single gap value to all sides of the grid cells. (grid-gap: 10px)
  • Row/Column Gap: Specifies the gap between rows or columns individually. (grid-row-gap: 5px; grid-column-gap: 10px;)

Grid Areas

Grid areas are named regions within the grid. You can use the grid-area property to specify the area an element should occupy. This allows for complex and flexible layouts.


.grid-item {
  grid-area: header;
}

Named Grid Lines

Grid lines can be named using the grid-template-areas property. This allows you to easily refer to specific lines and areas in your code.


.grid-container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
}

Grid Template Areas

Grid template areas allow you to define the layout of the grid using a visual representation. You can specify the areas where grid items should be placed.


.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Implicit Grid

In some cases, you may not need to explicitly define the grid tracks. CSS Grid provides an implicit grid that automatically creates equal-sized tracks based on the number of grid items.


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Auto-fit

Auto-fit is a technique that automatically adjusts the size of grid tracks based on the content within them. You can use the auto-fit keyword to specify how the tracks should be fitted.


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Auto-placement

Auto-placement automatically places grid items within the grid based on the available space. You can use the auto-flow property to control how items are placed.


.grid-container {
  display: grid;
  auto-flow: row dense;
}

Repeat Notation

Repeat notation allows you to easily create a grid with repeating tracks. You can use the repeat() function to specify the number of tracks and their size.


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Grid Functions

CSS Grid provides a number of functions that can be used to manipulate and calculate grid dimensions. These functions include:

  • grid-column()
  • grid-row()
  • grid-area()
  • minmax()

Next Up: CSS Responsive Patterns

In the next session, we'll learn how to create responsive layouts using CSS Grid. Responsive patterns allow your layouts to adapt and adjust to different screen sizes, providing a seamless user experience. Follow us to continue your learning journey!