Advanced CSS Grid Course

Explore the CSS grid layout, a modern system that organizes web content into rows and columns. Learn how it enables responsive, flexible designs with broad browser support.

Explore the basics of CSS grid by building a grid container and items, defining grid template rows and columns, and applying grid gaps.

Learn how the fr unit distributes space by adjusting column and row widths with one fr, two fr, and the repeat function, plus container sizing.

Position grid items precisely using grid row start, grid column start, and grid area shorthand. Learn to move item three to the desired location and practice with a coding challenge.

Learn to span grid items with the css grid-column property, using start and end lines and the span keyword, including two-cell spans and z-index layering.

Learn to name grid lines for rows and columns using square brackets, first row start and end, and apply them with grid-column and grid-row to position items.

Discover how to name grid areas with grid template areas, assign row and cell names, and use grid area to position items, including using a dot to denote empty cells.

Compare implicit grids and explicit grids in CSS grid, and learn how grid auto flow determines whether items fill rows or columns.

Learn to style implicit grids in css grid layouts by using grid-auto-rows for height and grid-auto-flow: columns for width, contrasting with explicit grids defined by item sizes.

Learn how to align grid items using align items and justify items, adjust individual items with align self, and center, start, end, or stretch them within their cells.

Position the grid items inside the container using justify-content to center, start, end, and distribute with space-between, space-around, or space-evenly, and use align-content to center or space rows vertically.

Explore how min-content and max-content affect CSS grid layouts, comparing main content behavior with min-content and max-content, and learning to center items in a three-column grid.

Learn the minmax() function to size grid items with min and max constraints in CSS grid. See how pixel ranges, max-content, and min-content determine layout based on container width.

Explore auto-fill and auto-fit in CSS grid, learning how container width and 100px column size determine the number of columns and how empty columns behave.

Explore when to use CSS grid versus flexbox, mastering puzzle-like layouts, equal-sized items, precise placement, and responsive alignment, and when to avoid grid for simple layouts or old browsers.

Explore building a CSS grid driven dashboard setup in Visual Studio Code, including header, stats cards, and a sidebar, with flexbox where needed, and downloading course materials from GitHub.

Develop a dashboard layout by building a blue sidebar and a white main container using css grid, including html structure, grid templates, and centered icons.

Plan grid items by defining columns and rows, create containers for input, links, and images, and use a nested grid for the spend time and post sections.

Build the dashboard header by adding the icon, search input, links, and bell icon with a red notification dot, while applying flexbox and border-box.

Learn to build a three-box visitors, customers, and orders display using flexbox, with curved indicators, numbered metrics, shadows, rounded borders, and coordinated colors for a clean dashboard.

Build the earnings circle inside a bank container using circle containers, conic gradient, and flexbox to center the circle, while applying a responsive grid layout and an absolute-positioned earnings display.

Build a visa card and transactions showcase using a card container, flex layouts, shadows, and rounded borders, then render a transaction list with icons and prices.

Construct the earnings statistics UI by building a statistics container and header with a year selector, adding a bar graph, and styling with grid and flexbox layouts, borders, and shadows.

Build the spent time statistics component by creating the span time container, adding a title and a time graph image, and applying CSS with flexbox, shadows, and absolute positioning.

Build the user post profile layout with HTML and CSS, including a circular image, a name and subtitle, a row of post icons, and responsive design considerations.

Build the Delphi project with responsive css grid for a portfolio-ready html and css image gallery featuring varying image sizes. Observe its layout adapting across screen sizes.

Plan and structure a three-column, two-row main grid and a gallery grid to organize logo, input, profile, sidebar, and gallery header, images, and footer, using HTML and CSS.

Design and implement the header by adding a logo, a search input, and a button, then apply flexbox alignment, white background, padding, and a subtle box shadow.

Build and style the header profile item with bookmark and bell icons, a user image, and red notification circles using flexbox and absolute positioning.

Build a sidebar by integrating Roboto from Google Fonts, applying it to body and buttons, and styling items: restaurants, gallery, locations, customers—with icons, flex alignment, and a 65px implicit grid.

Build a responsive css grid gallery by defining a grid container, using grid template columns and rows, and spanning images with grid column and grid row for varied layouts.

Build the gallery footer in this advanced CSS grid course, styling a centered title and gradient button with flexbox, vertical layout, and responsive design preparations.

Learn to make a project responsive by adding a responsive.css, linking it in the header, setting a 1300-pixel breakpoint, and adjusting padding and container width.

Explore responsive design with css grid, using breakpoints at 950px and 780px to switch from three to four columns for the sidebar and refine header and gallery elements.

Complete the responsive design section by finishing a css grid project, implementing a circular search icon with flexbox alignment and media queries for small screen adaptation.