CSS Grid Masterclass

Discover what a CSS grid is, build a simple grid, learn grid components like rows, columns, and grid gap, and create a responsive grid without media queries.

Discover the css grid as a two-dimensional layout system with grid containers and items, lines, tracks, gutters, and grid areas. Learn direct children, inline and block axes, and browser support.

Create your first CSS grid by turning a container into a grid with six items, style padding and background, and preview it on a local server with a grid inspector.

Define rows and columns in a css grid using grid template rows and columns, set pixel and percentage sizes, explore auto behavior, and distinguish explicit from implicit grids.

Explain how the fr unit allocates available space in a CSS grid, where 1fr equals one part and 2fr scales columns. Illustrate with three columns and efficient row/column setup.

Master how to create rows and columns in css grid using repeat and minmax for efficient layouts. Define flexible and fixed column sizes, build patterns, and practice implementing grid templates.

Learn how to create even space between grid rows and grid columns using grid gap, including twenty pixel examples and the shorthand grid gap.

Explore how auto-fit and auto-fill create responsive grids in css grid masterclass by fitting columns within a grid container without overflowing, and understand how they differ in collapsing empty columns.

Explore implicit grids in the css grid masterclass by illustrating explicit grids, grid auto flow, and how the browser creates implicit rows or columns.

Explore how CSS grid tracks size to content using min-content, max-content, and min-max, showing how column width adapts to longest word and how max-content fits a full line.

Build two CSS grids: an explicit grid with three columns and four rows featuring distinct row and column gaps, and a responsive grid that auto-fits using minmax without media queries.

Explore positioning grid items using line numbers and names, implement grid areas, and manage layering, while considering accessibility concerns.

learn how to position grid items by line numbers in a CSS grid, using grid-column-start, grid-column-end, grid-row-start, grid-row-end, and their short-hand grid-column and grid-row to span multiple columns or rows.

Position grid items using line numbers, including negative line numbers, across grid columns and rows, and control spacing with span while distinguishing explicit from implicit rules.

Position grid items using the grid area property, which takes four values to define column and row start and end, or name regions with grid template areas for responsive layouts.

Name grid lines with square brackets and position items in a grid with three columns and three rows, using grid-column across named lines and multiple names.

Learn accessibility considerations when positioning grid items; visual order may diverge from underlying structure. Swap items in the source to maintain a logical screen reader order for headers and images.

Learn how to layer grid items in a two-by-two CSS grid by creating a stacking context and using grid-column, grid-row, and z-index to place items on top of one another.

Create a four by four CSS grid using grid template areas with six items, four columns, four rows, and a 10px gap. Place brand, header, sidebars, main, ad, and footer.

Learn to align grid items within a grid cell using justify items and align items on inline and block axes, including center, start, end, and stretch.

Align grid tracks with the grid container using justify content on the inline axis. Use line content on block axis and values like space between, space evenly, and space around.

Apply css grid to build a fully responsive restaurant menu site for Hamberger Cole, featuring a header, about section, menu, blog, photo gallery, and a contact form.

Build the header by placing a clickable brand logo on the left and a nav on the right using a two-column grid with a gradient header and rem-based sizing.

Create a banner with a background image and overlaid text using a banner block and bem elements, including background container, content, image, and a button, with styling coming next.

Explore responsive banner backgrounds using CSS grid in a three-by-three layout, spanning images and text across columns and rows with minmax(0, 1fr) and centered content.

Style the banner content by applying Playfair display font, uppercase headings, and a bottom-right gradient button with hover, focus, and active states; tune color, size, padding, and transitions.

Markup an about section with a background image, a two-part heading, two content columns, and three columns of figures. Build our story content and a numbers list.

Fix a banner image overflow and style the about section with CSS grid, setting a four-column layout and grid areas for title, content left, content right, and figures.

Turn the figures into a three-column grid, center content with justify-content and space-evenly, and style typography and a text-align center, layered heading with back and front text.

Plan and implement a two-column css grid menu layout with a heading, left and right menu containers, and menu items featuring image, title, description, a divider line, and price.

Master css grid techniques for menus in the css grid masterclass: implement two-column layouts, center headings, and design items as a three-column grid (image, content, price) with gaps.

Create a two-column grid for menu items, with text in first column using max-content and a line in second, center the grid, and style heading and price in uppercase.

In this css grid masterclass lecture, you set up a make a reservation section with background image and centered heading and subheading, using a grid layout and playfair display styling.

Explore building an image grid with CSS Grid Masterclass: create a six-by-six grid, define grid template columns and rows, center headings, and use object-fit: cover to fit images.

Create an image grid with css grid by spanning images across two columns and rows, explore grid auto flow and dense behavior, and position multiple images for a polished layout.

css grid masterclass shows how grid-auto-flow: dense fills empty cells by rearranging items when spans occur, improving grid density versus row or column flow.

Master a delivery partners grid by arranging four logos over a background image, with typography tuned to font weight 300 and font size 2.6 for a polished layout.

Explore building a three-column news blog section with article cards featuring image, blog title, body excerpt, a read more button, and a share option.

Build a responsive news grid with CSS grid, enabling three-column blog layouts, and a flipped article layout with image below and a positioned share button.

Learn to build a two-column contact form layout with CSS grid, including name, email, subject, and message fields, a submit button, and accompanying images, with styling and responsive alignment.

Create a two-column contact images grid where the first image spans both columns, fix gaps with a fixed height and object-fit cover, and note firefox and chrome rendering differences.

Explore building a footer with a three-column CSS grid, two grid rules, a logo, navigation links, and social icons, while tweaking image sizes and row heights.

Explore footer styling with a three-column top container featuring a centered logo and background image, plus social links, then refine the bottom area with typography and responsive tweaks.

Fix the banner image to fill the space on resize with object-fit: cover and implement a nav menu toggle with an icon and links to about, menu, delivery, and news.

Position the nav content to the right with absolute placement, convert the container into a grid to center items, and reveal the menu when the input is checked using CSS.

Master a responsive nav menu with hover underline effects and a bottom line created by a pseudo-element. Adjust padding, margins, and positioning to keep the menu fixed and readable.

Learn responsive styling with CSS grid by setting a 1200px breakpoint, adjusting font sizes, expanding about and menu grids, stacking blog items, and refining the contact layout with side padding.

Adjust padding and hide menu lines, tune font sizes, and resize images for responsive styling at 900px; stack the menu and contact sections into a single-column layout on smaller screens.

Explore responsive styling in CSS grid masterclass by configuring breakpoints at 600px, switching to single-column layouts, refining grid template areas, and using viewport-based heights to keep image grids fluid.

Celebrate completing the css grid masterclass. Commit to practicing what you learned, apply it to your next project, and share your work to keep improving.