The layout model CSS Grid includes many new grid-based properties and techniques. In this video, take a look at how to get started using CSS Grid.
- [Narrator] Earlier, we talked about using a grid…as a design concept and used the float property…to create the grid with CSS.…In this lesson, we'll take a look at using…new CSS grid-based properties.…Supposed you wanted to create content blocks…for blog post summaries.…The top row will have a larger image thumbnail…to bring more attention to new posts…and the second row will have a smaller thumbnail…for older posts.…Let's take a look at an example.…In the HTML, a container is needed for all the content items…which will form the rows and columns.…
In this example, I've given it a class…of grid-container in line one.…Then we'll also need a container for each grid item…to wrap the content to be included within each grid item…such as the image and heading.…In line two, you can see that I've given it a class…of grid-item and also line six and ten and so on.…This contains each individual item…and this is how the content looks by default.…There is currently just some basic CSS styles…like border and text alignments.…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.