49 Matching Annotations
  1. May 2021
  2. Feb 2021
    1. You use grid-area, so the place for the side nav is allocated at start. If you hide (or even delete) the side nav, that won't change anything about this. You have to do a little trick: Set the width for the first column to 0 and change the grid-gap because otherwise you will have a (not needed) gap at the left.
    1. Adding backgrounds and borders does feel like a missing feature of the CSS Grid specification and one which the Working Group have discussed along with many members of the community (the discussion thread is on GitHub).
    2. With Grid and generated content, we can add a line either side of our heading without adding any additional markup. The line will grow and shrink according to available space
    3. The key phrase here is “children of a grid container.” The specification defines the creation of a grid on the parent element, which child items can be positioned into. It doesn’t define any styling of that grid, not even going as far as to implement something like the column-rule property we have in Multi-column Layout. We style the child items, and not the grid itself, which leaves us needing to have an element of some sort to apply that style to.
    1. Ensure that there can only be four items per row: grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); grid-gap: 10px; With 20% minimum width per item, and a grid gap (of any length), there can never be more than four items per row.
    1. auto (i.e. minmax(auto, max-content))
    2. Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.
    1. If no end line value is declared, the item will span 1 track by default.
    2. Notice that you’re not naming lines with this syntax, just areas.
    3. The syntax itself provides a visualization of the structure of the grid.

      What is this an example of? self-referencing? self-presentation? duality?

    4. justify-content Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.
    1. When you generate before- and after-content pseudo-elements, Grid treats them as actual elements and makes them grid items.
    2. Since CSS doesn’t (yet) offer a way to style grid cells, areas, or tracks directly, we have to stretch elements over the parts we want to style independently from the elements that contain content.
    3. div:nth-of-type(3n+1) { grid-column: 1; } div:nth-of-type(3n+2) { grid-column: 2; } div:nth-of-type(3n+3) { grid-column: 3; } div:nth-of-type(-n+3) { grid-row: 1; }
    4. The 1 / -1 means “go from the first grid line to the last grid line of the explicit grid”, regardless of how many grid lines there might be. It’s a handy pattern to use in any situation where you have a grid item meant to stretch from edge to edge of a grid.
    5. They likely won’t have any content, making them a sort of structural filler to spackle over the gaps in Grid’s capabilities.
    1. .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; }
    1. the difference is exactly like block and inline-block ... if you use inline-grid with sibling elements they will be placed in the same line unlike grid ... so here you change to grid also since each element is inside a grid area alone
  3. Jan 2021
    1. auto As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

      And I'm guessing that when you use auto as a value (not inside of a minmax), that it is equivalent to minmax(min-content, max-content)? Wish I could see that confirmed somewhere...

    1. CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
    1. The explanation here is that the minimum size of an fr unit is auto. Grid then looks at the min-content size of the item. If the item has a size (you’ve given it a width) or has something in it with a size such as an image, the min-content size might be much bigger than the share of available space you think 1fr will give you. It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over. If there is space to grow then the tracks grow from that min-content size assigning space. Using minmax, as you have pointed out, is the best thing to do if you want to forcibly have equal width tracks, as that says “I want this track to have a min-content size of 0”, you could potentially in that situation end up with overflows as you lose the squishiness.
    2. It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over.
    3. It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside.
  4. Sep 2020
  5. Feb 2019
    1. So I won't be covering the out of date IE syntax

      See other resources for this, among which: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ and cheer up! IE support for CSS Grid is good and definitely work-able!

  6. Oct 2018
  7. Oct 2016