Building the grid and placing the elements

Now that the grid rows and columns are defined the values can be translated directly into CSS, here’s what it might look like:

.grid {

display: grid;

grid-template-columns: 4.06504065% 12.814556717% 18.81533101% 13.008130081% 2.322880372% 8.439798684% 8.594657375% 23.228803717% 8.713372048%;

grid-template-rows: 157px auto 57px auto 73px 170px auto;

}

This will give us a responsive grid to work with that has defined rows and columns exactly where they’re needed, now all that’s left is to place each of the child elements at the correct locations on the grid.

This grid is laid out to contain a max of 6 uniquely positioned elements, to place each element within a specific column and row the grid-column-start , grid-column-end and grid-row-start properties can be used. The property names are pretty self explanatory, it just takes working out the correct column/row number to provide for each element.

While doing this it really helps to be able to visualise the grid, I used the diagram I manually created to do this, alternatively Chrome and Firefox now have grid development tools built in, these might help with defining which elements should sit where. Just open inspect element and select the grid element to have the grid lines display as an overlay within the browser.

Chrome developer grid tools are pretty neat

Let’s take the first grid element in the top left. It starts at the 1st column / 2nd row and ends at the 5th column, as shown in the diagram below.

This can be defined in CSS by using a selector that targets the first grid element and specifying the grid column and row start/end values:

.grid-element:nth-child(1) {

grid-column-start: 1;

grid-column-end: 5;

grid-row-start: 2;

}

If no grid-column-end/grid-row-end is declared, the element will default to spanning one row or column. So in this example only the grid-row-start needs to be specified as 2 for the grid element to span the second row only.

Once all the grid element placements are defined there should be a complete list of grid element with co-ordinates like so:

.grid { display: grid; grid-template-columns: 4.06504065% 12.814556717% 18.81533101% 13.008130081% 2.322880372% 8.439798684% 8.594657375% 23.228803717% 8.713372048%; grid-template-rows: 157px auto 57px auto 73px 170px auto; } .grid-element:nth-child(1) {

grid-column-start: 1;

grid-column-end: 5;

grid-row-start: 2;

} .grid-element:nth-child(2) {

grid-column-start: 7;

grid-column-end: 9;

} .grid-element:nth-child(3) {

grid-column-start: 3;

grid-column-end: 5;

grid-row-start: 4;

} .grid-element:nth-child(4) {

grid-column-start: 8;

grid-column-end: 10;

grid-row-start: 4;

} .grid-element:nth-child(5) {

grid-column-start: 2;

grid-column-end: 4;

grid-row-start: 7;

} .grid-element:nth-child(6) {

grid-column-start: 6;

grid-column-end: 10;

grid-row-start: 6;

}

To handle the mobile view it’s easy to change any of the grid values per breakpoint, in this case the grid isn’t needed on mobile as all the elements go full width. So the grid code can be wrapped in a min-width breakpoint then it will never be used on mobile: