Theodore Steiner Theodore Steiner - 27 days ago 5
CSS Question

Grid items: automatic vs defined placement

I had a question regarding the

display:grid
property, specifically when it comes to two-column layouts. In the snippet I've set up a basic two-col. layout. When you have something like this, just a
2fr
section and a
1fr
section do you still need to assign where the column begins and spans like
grid-column: 1/2;
or is it simply implicit?



* {
padding: 0;
margin: 0;
font-size: 17px;
}

main {
width: 1080px;
margin: 0 auto;
border: 1px solid;
height: 100%;
min-height: 500px;
display: grid;
grid-template-columns: 2fr 1fr;
grid-rows: auto;
grid-gap: 20px;
}

article {
border: 1px solid;
//grid-column: 1/2;
}

.sidebar {
border: 1px solid;
//grid-column: 2/3;
}

<main>
<article></article>
<aside class="sidebar"></aside>
</main>




Answer Source

CSS Grid Layout has something called the Grid Item Placement Algorithm.

This algorithm defines a process for laying out grid items based on various factors.

For example, source order matters. You have a two-column grid and two grid items, and the order property isn't in play, so the items are laid out in their order of appearance in the HTML.

Also, the initial setting of the grid-auto-flow property is row. This means that grid items are rendered horizontally, by default. If you change the value to column or dense, the layout changes.

For a complete explanation and a list of factors taken into consideration see:

8.5. Grid Item Placement Algorithm

The following grid item placement algorithm resolves automatic positions of grid items into definite positions, ensuring that every grid item has a well-defined grid area to lay out into.