From the course: CSS: Combining Grid and Flexbox
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Grid container properties - CSS Tutorial
From the course: CSS: Combining Grid and Flexbox
Grid container properties
- [Instructor] As I mentioned, just like Flexbox, CSS Grid has properties for the parent container and for the child items. Let's look at some of the container properties first. For the container, we have display, grid-template-columns and grid-template-rows, grid-template-areas, grid-auto-columns and grid-auto-rows, grid gap, justify-items and align-items, justify-content and align-content, and grid-auto-flow. Display defines the element as a grid container and establishes a new grid, formatting context for all of the contents. We can either use display:grid or display:inline-grid. There's no real difference except how the parent element acts within the page. It is more common to use display:grid. Next, we have grid-template-columns and grid-template-rows. These define the columns and the rows of the grid with a space separated list of values. The values represent the track size and the space between them represents…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.