TwosWrite things down

Day 13 - CSS flexbox items, grid

Day 13 - CSS flexbox items, grid

by Nino · 76 things on Twos

Setting an initial item size
flex-basis: auto; // changes the size of the flex items across the main axis (default) // also percentage or px
flex-basis is a flex item property, not in any flex container rules
they still adapt their size to fit their container and still shrink to fit
The values we set for flex-grow are ratios
flex-grow: 0; doesn't adapt to size, only as wide as the content (default)
flex-grow: 1; gets the most space
Flex items shrink when they can't expand to their flex-basis value
designs that shrink are great for smaller devices
flex-shrink: 1; (default)
if we set both items to flex-shrink: 0, they overflow outside of their containers (if the container is smaller than the items' width)
.first { flex-shrink: 1; } .second { flex-shrink: 1; } .item { background-color: #bfdaf9; margin: 1px; flex-basis: 150px; }
Flex shorthand
flex: 0 1 auto; (default)
values in the following order are: flex-grow, flex-shrink, flex-basis
---
Flex items size across main axis
flex-basis: auto;
flex-grow: 0;
flex-grow: 1;
Flex shrink
flex-shrink: 1;
Flex shorthand
flex: 0 1 auto;
---
insert semi-completed node sreenshot
—-
CSS Grid
grid items are flexible
display: grid;
<div class="grid-container"></div> // parent element
<div class="grid-item">1</div> // child element
Grid Columns
grid-template-columns: 50px 50px 120px; // left to right direction
default grid direction is row? (top to bottom)
setting a column to auto will make grid items take up as much space as they can.
units: fr, px, auto (percent?)
fr = fractional unit, grid's special measurement unit
.grid-container { display: grid; grid-template-columns: 1fr 2fr1fr;
grid-template-columns: repeat (3, 1fr); // repeats three 1fr
Grid Rows
grid-template-rows: auto auto auto;
Defining Grid Columns and Rows
grid-template property defines grid rows and columns in one line
grid-template: 50px 50px / 150px 150px // grid-template shorthand // first two units are rows then columns
Grid Gaps (like margins, but not all sides)
gap property creates space between grid items
by default, grid items don't have any space between them
row-gap: 5px;
column-gap: 5px;
gap: 5px 10px; // rows / columns
gap: 10px; //equal gaps for rows & columns
grid-gap: 2px; ?
Defining a Grid Item's Size
the grid-column property is used to expand a grid item across multiple columns
span talks about how much we expand a grid item
does grid property have a shorthand?
grid-column: span 2; // spans an item to 2 columns (horizontally)
grid-row: span 2; // spans an item to 2 rows (vertically)
grid-column: 1 / span 2; // column 1 spans 2 columns
grid-row: 1 / span 2; // row 1 spans 2 rows
---
display: grid;
<div class="grid-container"></div>
<div class="grid-item"></div>
Grid Template Rows / Columns
grid-template-columns: 50px 50px 120px;
grid-template-rows: 50px 50px 120px;
grid-template-rows: repeat(3, 2fr);
grid-template: 50px 50px / 150px 150px;
grid-column: span 1;
grid-row: span 2;
grid-column: 1 / span 2;
grid-row: 1 / span 2;