Science Knowings: JavaScript Course For Social Media

CSS Grid Layout

From CSS Variables to Grid Layout

Welcome to CSS Grid Layout! Before we dive in, let's recall our previous lesson on CSS Variables, where we learned to store and modify values centrally.

CSS Grid Layout is a powerful layout system that gives us even more flexibility and control over how we arrange elements.

What is CSS Grid Layout?

CSS Grid Layout is a two-dimensional layout system. It divides the page into a grid of rows and columns, allowing us to place elements precisely within those cells.

The Grid Container

To create a grid, we start with a container element (e.g., <div>) and apply the display: grid property. This container defines the overall grid area.

Grid Items

The elements inside the grid container are known as grid items. We can place grid items anywhere within the grid.

Grid Lines

Grid lines are the horizontal and vertical lines that define the grid cells. We use the grid-template-rows and grid-template-columns properties to specify the number of rows and columns.

Grid Tracks

Grid tracks are the individual rows and columns within the grid. We can specify their size using the grid-template-rows and grid-template-columns properties.

Named Grid Lines

We can give names to grid lines using the grid-column-name and grid-row-name properties. This allows us to refer to specific grid lines easily.

Grid Gaps

Grid gaps are the spaces between grid items. We can control the size of the gaps using the grid-gap and grid-column-gap/grid-row-gap properties.

Grid Auto-Placement

Grid auto-placement automatically places grid items into the available grid cells. We can control the placement order using the order property.

Grid Template Areas

Grid template areas allow us to define custom grid layouts using named areas. We can specify the areas using the grid-template-areas property.

Using Grid Templates

Grid templates are pre-defined grid layouts that we can apply to our grid containers. This makes creating complex layouts easier.

Positioning Grid Items with grid-area

The grid-area property allows us to specify the exact grid cells an item should occupy.

Resizing Grid Items with grid-column/grid-row

We can control the width and height of grid items using the grid-column and grid-row properties.

Aligning Grid Items with justify-content/align-content

The justify-content and align-content properties allow us to align grid items within the grid container.

Next Topic: CSS Flexbox

In the next session, we'll explore CSS Flexbox, a one-dimensional layout system that provides flexibility and control over the layout of elements. Follow us for more!