Advanced Grid Properties

Summmary of:
1. https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-advanced-grid-properties
2. https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-using-flexbox-and-grid

❗ resize: both allows users to resize the container by clicking and dragging
❗ overflow: auto enable scrolling if we resize the container to be smaller than our grid can accommodate

Repeat

.grid-container {
  grid-template-rows: repeat(2, 150px);
  grid-template-columns: repeat(5, 150px);
}

Fractional units

.grid-container {

  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

• fr : a way of distributing whatever remaining space is left in the grid
• Units with fr resize according to resize: both

min() and max()

.grid-container {
  grid-template-rows: repeat(2, min(200px, 50%));
  grid-template-columns: repeat(5, max(120px, 15%));
}

• The track size should be 50% of the grid’s total vertical space (because we are defining a row size), unless that number would exceed 200px
• Conversely, the grid column size will be calculated based on the larger of the two values 120px and 15% of the grid container’s width. In doing so, we are essentially setting a minimum width of our grid column size at 120px.
  → 복습 필요... 이해 잘 안됨

minmax()

.grid-container {
  grid-template-columns: repeat(5, minmax(150px, 200px));
}

• Stops shrinking at 150px, stops growing at 200px
• Used only with Grid

clamp()

clamp(minimum-size, ideal-size, maximum-size)

.simple-example {
  width: clamp(500px, 80%, 1000px);
}

• If viewport width is 1000px, 80% of the number would be 800px but it will stay as 500px
• Used anywhere in CSS

Auto fit and auto-fill

Auto fit

.simple-example {
  display: grid;
  width: 1000px;
  grid-template-columns: repeat(auto-fit, 200px);
}

The width is 1000px and we are telling it to fill in columns with tracks of 200px each. As long as there are at least five grid items, this will result in a 5-column layout no matter what.

.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

• auto-fit will return the highest positive integer without overflowing the grid.
• If window is 500px wide, our grid will render 3 columns. Once the browser has determined how many columns we can fit, it then resizes our columns up to the maximum value allowed by our minmax() function.
• In this case, our max size is 1fr, so all three columns will be given an equal allotment of the space available. As we resize our window, these calculations happen in realtime.
  
  
  

Auto fill

• In most cases, work exactly the same way as auto-fit
• When the grid is expanded to a size where another grid item could fit, but there aren’t any left, auto-fit will keep the grid items at their max size.
• But using auto-fill, the grid items will snap back down to their min size once the space becomes available to add another grid item, even if there isn’t one to be rendered.
• They will continue their pattern of growing to max and snapping back to their min as the grid expands and more room becomes available for new grid tracks.

Content first vs layout first design

• In Content First Design, use Flexbox.
  - In Content First Design, you begin with clarity of how the content should be, and the layout follows. Flexbox's nature gives you control of the behavior of items through logical rules. While Flexbox gives you control over its content, the final layout is only a consequence. Depending on the dimensions of the flex container, the general layout can change a lot.
  
  

• In Layout First Design, use Grid.
  - In Layout First Design, you decide how you want the pieces arranged, then fill in the content. That is when Grid shines. Defining grid row and column tracks gives you full control of layout. Content in a grid can only fill the spaces of explicit or implicit tracks. So, when you have an idea of how the big picture of a container should look like, Grid is the clear choice.