In Modern CSS part 1 and part 2, I discussed using flexbox for layout. In this post, I explain how I used CSS Grid along with fallbacks for IE and other older browsers.

The Grid

One of the design requirements for Chaffey Building Group is the display of properties in a grid format.  An example of this is the Eastside Sold Properties page.  Of course, this layout is a natural use case for CSS Grid.

Laying out this simple grid for browsers with CSS Grid support is fairly easy.  We set the parent container to display:grid so that each article becomes a grid item.

1
2
3
4
5
6
.sold-properties-container {
		display: grid;
		grid-gap: 50px;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 
}

Note the minimum size for the grid columns is 280px. This is increased at various break points so that we never see more than 3 properties per row.  For example:

1
2
3
4
5
	@media screen and (min-width: 93.750em) {
		.sold-properties-container {
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	}
}

@Supports

To handle browsers that don’t support CSS grid, each article has the following styles applied.

1
2
3
4
5
6
article {
		display:inline-block;
		margin-right:50px;
		max-width:400px;
 
	}

So, to prevent having both a margin and a grid gap, @supports is used.

1
2
3
4
5
6
7
8
9
10
@supports(display:grid){
		.sold-properties-container {
			article {
				display:block;
				margin-bottom:0;
				margin-right:0;
				max-width:100%;
			}	  
		}
	}

IE 11

IE11 supports an older version of grid with the -ms prefix.  As the specification for IE is quite different, you cannot just reply on an autoprefixer such as the post-CSS module I use with grunt. You also have to place each item on the grid as there is no auto placement. And you must use margins as there is no grid gap property.

The margins and width of each item were set earlier and overridden for browser with grid support.  IE11 does not support @supports so it still maintains the proper settings.

Despite the above issues, I wanted to take on the challenge of using grid in IE.  As I am using the SCSS preprocessor, I developed a function to loop through the items to place them on the grid. I allowed for more items than I currently have so the site could grow without running into an issue.

First, I use the autoprefixer to set the display and column properties. For IE11, I would end up with CSS as follows:

1
2
3
4
.sold-properties-container {
	display: -ms-grid;
	-ms-grid-columns:(minmax(280px,1fr))[auto-fit];
}

Then I add the code to place each grid item in the correct spot.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.sold-properties-container {
		@for $i from 1 through 28 {
			@if ( $i % 3 == 0 ) {
				article:nth-child( #{$i} ) {
					-ms-grid-column: 3;
					-ms-grid-row: ($i /3);
 
				}
			}
			@else {
				article:nth-child( #{$i} ) {
					-ms-grid-column: $i % 3;
					-ms-grid-row: ceil($i /3);
				}
			}
		}	
}

In the above code, I use the remainder to determine which of the three columns the grid item goes into. A remainder of zero is always the third or last column. The other items go into column 1 or 2.

To calculate the row, the ceil function is used to get the integer greater than or equal to the item divided by three. So, item 8 is in the third row and item thirteen is in the fifth.

Here is a sample of some of the generated code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.sold-properties-container article:nth-child(1) {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
}
.sold-properties-container article:nth-child(2) {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
}
.sold-properties-container article:nth-child(3) {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
}
.sold-properties-container article:nth-child(8) {
	-ms-grid-column: 2;
	-ms-grid-row: 3;
}

Other Browsers

For browsers with no grid support, I use a fallback of  display:inline-block for the article.

For more posts on modern css please see Modern CSS – part 1 and Modern CSS – part 2.