Using the span keyword you can control the column or row span of a grid item while still allowing it to be placed automatically.
- Let me show you one more thing before we move on…to the next example.…Looking at this layout we have right now…I'm sure you're thinking…this is cool and all…but it's starting to look really boring…especially when we start lightening the view port.…This is about as rigid of a grid as you can get…and hardly inspirational…unless you're making some sort of image gallery.…If you want something a little more dynamic right,…the images have different sizes,…and different things happen.…Well using CSS Grid that's actually pretty straight forward.…If I go into my style sheet…and then find the media query for this wide area…where we have four columns,…I can create a new rule, call it double,…and then inside the rule I'll say…grid, column,…span two,…and grid row,…span two.…
That means any element that has double class appended to it…will now span two columns and two rows.…And I of course have to apply that to one of these elements.…So I'll go in here and maybe add it to the first one.…So I'll just call it LI class card item double.…
Author
Released
8/30/2017- Defining a grid
- Grid lines and units
- Automatic and manual grid item placement
- Planning for grid layouts
- Starting your layouts with pen and paper
- Multicolumn layouts
- Full-bleed single column layouts
- Making the grid responsive
- Various card layouts
- Accessible off-screen navigation layouts
Skill Level Advanced
Duration
Views
Related Courses
-
CSS Essential Training 1
with Christina Truong2h 36m Beginner -
CSS Essential Training 2
with Christina Truong2h 21m Beginner -
Building Responsive Forms with Flexbox
with James Williamson1h 19m Intermediate
-
Introduction
-
Welcome1m 11s
-
Using the exercise files1m 18s
-
Prerequisites41s
-
-
1. CSS Grid: Core Principles
-
Terminology3m 27s
-
Define a grid4m 16s
-
Grid lines and units5m 14s
-
Manual grid item placement7m 45s
-
Named lines5m 22s
-
Grid areas8m 1s
-
Grid gap3m 22s
-
-
2. Planning for Grid Layouts
-
Accessibility first1m 54s
-
3. Multi-Column Layout
-
The challenge43s
-
Check for grid support1m 15s
-
Create the main grid3m 19s
-
Position items on the grid2m 16s
-
Breaking the grid3m 55s
-
-
4. Full-Bleed Single Column Layout
-
The challenge1m 27s
-
Check for grid support2m 5s
-
Create the shared grid2m 51s
-
Make the grid responsive2m 6s
-
-
5. Various Card Layouts
-
The challenge48s
-
Create a grid for each card2m 21s
-
Position items on the grid4m 20s
-
Place the cards on a grid5m 17s
-
-
6. Accessible Off-Screen Navigation Layouts
-
Set up the main grid3m 36s
-
Create an overflowing grid3m 30s
-
Thank You
-
Conclusion2m 19s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Create different-sized grid items