cheatsheets devlog search


Notes on CSS Grid

Title: Notes on CSS Grid
Date: 2023-01-22
Sequence: 2
Tags: []

A plain site to learn css grid. I like it because it's structured how I would structure things.


The below link is also quite cool, it makes learning css grid a game which is interesting.



As soon as you do `display: grid;`, then all the direct children will become grid items and span the full width. This means that the default is one column that takes up the entire width. I'm guessing the height of the elements are dictated by whatever is inside the children elements at that time.

`display: inline-grid;'` makes it so the width is based on the longest child element.

The `grid-template-rows` and `grid-template-columns` attributes will let you set the size of the rows and the columns. This is a list of however many rows or columns you wish to define.

The repeat function can be used to specify the size of a row or a column dynamically. For example `grid-template-columns: 30px repeat(3,1fr) 30px;` will create 5 columns. The first and last columns are 30px while there are 3 columns equally sized in the middle.

The `grid-gap` property is a shorthand for `grid-column-gap` and `grid-row-gap` which can be set individually. Very useful!

There are many ways to position things with css grid but the best way seems to be to using named areas.

Positioning with Columns

Positioning with Areas


Menu 1

Menu 2

Menu 3