These are just raw notes on CSS Grid. They aren’t necessarily organized in any specific way, this is more of a board to place things I learn about the topic. I used to have these unorganized within the notes app on my phone, but by placing them here I hope that someone else can use them too. If you have any questions on the notes or a question on a particular snippet feel free to reach out to me using the form at the bottom of this page.
Responsive grid without media queries:
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(calc(10% + 7.5rem), 1fr));
grid-auto-rows: 100px;This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.
Use order: 2; to set the order of a specific element (In this case it will be the 2nd item)
Use writing-mode for vertical text that still adheres to CSS grid
when spanning an element from the first to the last column you can use this notation:
grid-column: 1 / -1;Name your grid, don’t just use numbers – grid-template-columns: [sidebar] 1fr [content] 2fr;
Minmax is easier than you think – just set a min and max for each item and let the browser figure out how many items fit in each row.
auto-fill and auto-fit allow for responsive layouts without media queries. Try it out.
- shorthand is grid-template: {rows} / {columns};
- define a width and height on the container if you want to use auto all around and no specific measurements
- when using grid-template-areas you can use . for a blank area
- Responsiveness:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - For photo gallery that fills in spaces masonry style use:
grid-auto-flow: dense; - auto-fit will fill empty space by making the rows bigger, auto-fill will create blank spaces if there is extra space
- justify-content: center; will horizontally center the grid content if it doesn’t completely fill the space
- justify-items: center; will horizontally center the items within their container
- align-content: center; will vertically center the grid content if it doesn’t completely fill the space
- align-items: center; will vertically center the items within their container
- justify content: space-between; will evenly space out the items
- justify content: space-evenly; will evenly space out the items, not just the space in-between the objects
- justify content: space-around; is basically like adding padding on both sides to an element
- justify-self: center; and align-self: center; will do the same as above but just for a specific section
- Use place-items: center; to set both the justify-items and align-items in one declaration
- grid-auto-rows and grid-auto columns are used when you place things in rows or columns that aren’t created. Mostly used for dynamic content such as menus or used-generated content.
@joekotlan on X