Theory
Theory
Comments

Combining automatic and explicit coordinates, part 2

As you may have noticed, we now have empty areas that are not filled with elements that we can use. Therefore, our next step after defining our rows and columns will be to distribute the elements. Why waste this precious space?

The idea is that we should correctly distribute this space among the existing elements.

How can we do that? Should we assign a start and end to all of the elements? That’s not necessary. Some of the elements may have clear coordinates in the grid, and some may take up the remaining space, that is, the elements will be automatically spaced by the browser.

This works as follows:

First, the elements that have explicit coordinates are lined up.
Then the elements that have not been explicitly assigned coordinates are placed. They are arranged sequentially according to the order in the layout in the remaining free cells from the start of the grid to the end. In terms of their dimensions, these grid items take up just one cell.

I bet that you can’t wait to try all of this out in practice.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Combining automatic and explicit coordinates, part 2</title> <link href="world.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world"> <div class="land land--small"> <div class="element element--water element--simple">1</div> <div class="element element--grass element--simple">2</div> <div class="element element--rocks element--simple">3</div> <div class="element element--lava element--simple">4</div> <div class="element element--sand element--simple">5</div> </div> </body> </html>

CSS

.land { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }

Goalscompleted

Assign the grid item coordinates for column grid lines 1 to 4 for the .element-water block.
Assign the coordinates for row lines 2 to 4 for the .element--grass block.
And assign the column lines from 2 to 4 for the .element--sand block.

Combining automatic and explicit coordinates, part 2

Comments

Log in

Sign up

Restore access