CSS Grid Layout Overview

A two-dimensional grid-based layout system for flexible rows and columns, defined entirely in CSS.

The element that houses the grid structure, styled with the display: grid or display: inline-grid property.

CSS property used to define the number and size of columns in a grid layout.

A CSS unit for flexible column sizing in a grid layout, allocating space based on available remaining space.

Column width specified as percentages based on the total container width.

Grid rows adjust their size automatically based on content.

If grid container has fixed height then rows will be equally sized based on fixed height value

Columns using percentages may overflow container if width is limited by fixed width and gaps.

A property used to name grid areas, allowing you to refer to specific areas of a grid layout using names.

Specifies which area of a grid a grid item occupies. This property uses names from grid-template-areas to place the element.

Defines a minimum and maximum size for a grid track (row or column).

Creates multiple grid tracks with a fixed or flexible size.

Dynamically creates grid tracks based on available space when the grid has more items than tracks.

Adjusts the size of the grid items to fill the available space, potentially resizing existing track sizes

A row or column in a CSS Grid layout.

CSS grid layouts that adapt based on screen size.

The prominent section at the top of a webpage, designed to grab attention and create a strong first impression. Often includes a large image and compelling text.

A CSS function that allows you to perform mathematical calculations within CSS styles. Used to calculate width, height, margins, paddings, etc., using different units and operators.

Images that adjust their size and proportions based on the size of the screen or container, providing a smooth viewing experience across different devices.

A height set to 100% of the viewport height (the visible portion of the screen). Used to make elements span the entire screen height.

Designing websites that adapt to different screen sizes and resolutions, providing optimal user experience across various devices.

The number of pixels displayed on a screen, determining image sharpness and detail.

The ratio of screen width to height, influencing how content fits and looks.

A website design where the content width remains constant regardless of screen size, using horizontal scrollbars if needed.

Bars that appear at the bottom of a webpage when the content width exceeds the screen width.

A CSS property used to define the number and size of columns in a CSS Grid layout.

The max-width property in CSS allows you to set the maximum width of an element. The element will only be scaled up to the specified width, but will shrink if necessary to fit within its container.

The aspect-ratio property in CSS allows you to define the fixed ratio between the width and height of an image, helping to preserve its original proportions.

Media Queries are a powerful CSS feature that allows you to apply different styles based on the characteristics of the device viewing your website, such as screen size, orientation, or resolution.

Media queries have three main components: the @media at-rule that signals the start of the query, a media type (like 'screen' or 'print') that defines the target device, and media features that specify conditions like screen width.

An example of a media feature is (min-width: 300px) and (max-width: 700px), which selects devices with screen widths between 300 and 700 pixels.

Media queries enable responsive design, allowing websites to adapt their layout and appearance based on the viewing device. This improves user experience and ensures optimal readability on different screen sizes.

A CSS rule that applies styles based on certain conditions like screen size, orientation, or resolution.

The visible area of a web page in a browser window, including the dimensions and orientation.

Operators such as 'and', 'or', and 'not' that combine multiple media query conditions for more specific targeting.

Specifies whether the screen is in portrait (taller than wide) or landscape (wider than tall) mode.

Properties like 'width', 'height', 'max-width', 'max-height', 'min-width', and 'min-height' define the dimensions of the viewport.

The user preference for light or dark color schemes, detected by the 'prefers-color-scheme' media query.

Using media queries to adjust flexbox properties like 'flex-direction' to create different layouts for various screen sizes.

Including media queries within the tag used to load different CSS files based on screen conditions.