view_column Layout

  • Material Design uses a column layout grid with 8dp increments.
  • Components are positioned using either a fixed width or fluid width.
  • Breakpoints and user inputs can change the appearance and behavior of components.
Layout

code Layout activity

Learn how to customize the image list component by changing the type of list, the number of columns, and the gutter space of the list.

A. Customize the number of columns

Using SASS mixins, you can easily manipulate the number of vertical columns in an image list component.

1
Use the image list mixin to change the number of columns from 1 to 2

In the my-components.scss file, find the selector for the .mdc-image-list class. Update the number of columns in the mdc-image-list-masonry-columns mixin from 1 to 2. You can also copy the code snippet below. 

.mdc-image-list {
  @include mdc-image-list-standard-columns(2);
}
check Part A Complete

Check your mobile view to see how your image list now has 2 columns. There will be gaps and strange spacing, but we are going to fix this in Part B.

B. Create a masonry-style layout

Using SASS mixins and CSS classes, you can manipulate an image list to allow the use of dynamically sized container heights that reflect the aspect ratio of each image, rather than creating large gaps in the layout. This requires two steps: one within your my-components.scss file and one in your public/layout.html file.

1
Update the image list mixin from ‘standard’ to ‘masonry’

Update the list’s mixin to use ‘masonry’ instead of ‘standard’. Copy the snippet below and then paste it to replace the mixin in my-components.scss. 

.mdc-image-list {
  @include mdc-image-list-masonry-columns(2);
}

2
Add the masonry image list class to your HTML

To achieve a masonry list, you need to include an additional class in your image list's <ul> HTML element. Copy the code below and replace line 143 of your public/layout.html file. 

<ul class="mdc-image-list mdc-image-list--masonry">
check Part B Complete

Refresh your browser and check the live prototype to see how your image list now is using masonry-style spacing. The gaps and holes from Part A should now be removed. The gutter space between images might be a bit large, but we'll fix that in Step C.

C. Adjust the gutter size of your image list

Using the same SASS mixin from Part B, you can manipulate an image list’s gutters to allow for more or less space between each image. This only requires a single step!

1
Add a gutter size mixin to the image list

To change the gutter size of an image list, add an additional value to the image list mixin in my-components.scss. This second parameter represents the gutter size. Copy the code snippet below, and replace the current mixin. 

.mdc-image-list {
  @include mdc-image-list-masonry-columns(2, 4px);
}
★ Design Tip

Adjust the gutter size as you see fit. Smaller gutter sizes are more distinct and utilitarian, while larger gutters give more focus to the images.

check Part C Complete

Check your live prototype to see how your image list is now using masonry-style spacing and custom gutter sizes.