CSS Grid Overview
Written — Updated
- Source: https://scotch.io/tutorials/deep-dive-into-css-grid-2
- And more added over time
- Also See
- http://1linelayouts.glitch.me/ has a lot of nice CSS Grid examples
- Task Manager Example
- “Grid lines“ are like lines between cells on a spreadsheet.
- “Grid tracks” are the rows and columns in the grid, where the content actually goes.
- Cells are the individual spaces in the tracks where content goes.
- Areas are cells combined together when they span more than one row or column.
display:gridsets the element to be a container for a grid layout.
- Row and Column Sizing
- These units are new for Grid layout.
frstands for fraction, and
1frrepresents one unit of space out of the sum of the
3fr 4fr 3frwould be 10 in all with the space allocated proportionally.
- When fixed units are used alongside fractions, the fixed units get their space and the rest is allocated proportionally to the fractions.
- These units are new for Grid layout.
minmax(min, max)sets flexible sizing, with the size clamped to the values given.
width: autotells the item to use as much space as possible given the constraints of the other items. As a minimum, it is similar to
width: fitcontent(200px)works like
autobut with a maximum size
- If a CSS grid column does not have an explicit width then its min-width ends up similar to
auto. This can sometimes cause undesired issues, like with large images or
<pre>tags, and so using something like
minmax(0px, 1fr)can help here.
- Grid Layout
grid-template-columnsdefines the grid column layout
- It takes a variety of values.
100px 100px 100pxdefines three columns each of 100px width, for example
grid-template-rowsworks just like
grid-template-columnsbut for rows
- If either rows or columns is omitted, the widest/longest element in the row or column is used for all elements.
grid-templateis shorthand for rows, columns, and
grid-auto-columnsdefines the size of columns not explicitly specified in the template. Likewise for
grid-auto-flowdefines how grid cells are added into the grid.
rowis the default which means that they go horizontally filling a row first.
columncan also be used to go vertically.
- Grid items can use
grid-row-endto define starting and ending grid indexes to span multiple grid spaces.
grid-columnare shorthand for the start and end properties
grid-column: 3 / 5would start at column 3 and end at column 5
grid-area: rowstart / columnstart / rowend / columnendcan also be used
- You can use negative numbers to indicate offsets from the end:
1 / -1would span the entire row or column.
- Instead of absolute widths you can use
spanto indicate widths.
3 / span 2to start at 3 with a width of 2, or
span 2/ 5to end at 5 and go back 2 from there.
- This allows you to name different areas of the grid
- When cells have the same name, CSS combines them into a single area that spans multiple cells.
- You can then use
grid-area: headerto indicate that an element should go in a particular grid spot.
.can indicate that a cell should be empty.
grid-templatecombines the areas with the sizes
- The size at each line is the height of the row, and then the sizes after the slash at the end are the column widths.
- You can also define the rows and columns separately
- So in this case the
mainarea is named and the
[main-end]delimiters specify its location and size.
repeatjust repeats some layout some number of times.
repeat(3, 1fr 2fr)expands to
1fr 2fr 1fr 2fr 1fr 2fr
repeatcan be interspersed with other values too
repeat(auto-fill, values)repeats the values as much as possible without overflowing.
auto-fillbut empty tracks are collapsed.
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr))is a commonly-used technique to fit as many equally-spaced columns as possible, keeping a minimum width too.
grid-column-gapdefine spacing between cells
ordersets the order in which cells appear if you want to do so explicitly.
grid-auto-flow: densecan allow the grid system to place cells in the first empty grid spot, even if it’s before other items in the logical order.