CODEWITHSUNDEEP
htmlcsscss-grid
Theodore Steiner
Theodore Steiner

Reputation: 1615

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>

Upvotes: 1

Views: 48

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371221

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.

Upvotes: 4

Related Questions