mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-05-05 07:07:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

pico-flexgrid

Browse source
This commit is contained in:
Jieiku 2022-01-05 19:14:34 -08:00
parent 4cc9d70d53
commit 8ce5885453
5 changed files with 70 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

80
scss/layout/_flexgrid.scss
View file

@ -11,26 +11,26 @@
}
// Using flexbox for the grid, inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
// By default each .column within a .row will evenly take up
// available width, and the height of each .column with take
// up the height of the tallest .column in the same .row
// By default each .col within a .row will evenly take up
// available width, and the height of each .col with take
// up the height of the tallest .col in the same .row
.row {
display: flex;
flex-direction: column;
flex-direction: col;
width: 100%;
padding: 0;
&.row-no-padding {
padding: 0;
& > .column {
& > .col {
padding: 0;
}
}
&.row-wrap {
flex-wrap: wrap;
}
// Vertically Align Columns
// Vertically Align cols
// .row-* vertically aligns every .col in the .row
&.row-top {
align-items: flex-start;
@ -47,7 +47,7 @@
&.row-baseline {
align-items: baseline;
}
.column {
.col {
display: block;
// IE 11 required specifying the flex-basis otherwise it breaks mobile
flex: 1 1 auto;
@ -55,100 +55,96 @@
max-width: 100%;
margin-left: 0;
// Column Offsets
&.column-offset-10 {
// col Offsets
&.col-offset-10 {
margin-left: 10%;
}
&.column-offset-20 {
&.col-offset-20 {
margin-left: 20%;
}
&.column-offset-25 {
&.col-offset-25 {
margin-left: 25%;
}
&.column-offset-33,
&.column-offset-34 {
&.col-offset-33 {
margin-left: 33.3333%;
}
&.column-offset-40 {
&.col-offset-40 {
margin-left: 40%;
}
&.column-offset-50 {
&.col-offset-50 {
margin-left: 50%;
}
&.column-offset-60 {
&.col-offset-60 {
margin-left: 60%;
}
&.column-offset-66,
&.column-offset-67 {
&.col-offset-66 {
margin-left: 66.6666%;
}
&.column-offset-75 {
&.col-offset-75 {
margin-left: 75%;
}
&.column-offset-80 {
&.col-offset-80 {
margin-left: 80%;
}
&.column-offset-90 {
&.col-offset-90 {
margin-left: 90%;
}
// Explicit Column Percent Sizes
// By default each grid column will evenly distribute
// Explicit col Percent Sizes
// By default each grid col will evenly distribute
// across the grid. However, you can specify individual
// columns to take up a certain size of the available area
&.column-10 {
// cols to take up a certain size of the available area
&.col-10 {
flex: 0 0 10%;
max-width: 10%;
}
&.column-20 {
&.col-20 {
flex: 0 0 20%;
max-width: 20%;
}
&.column-25 {
&.col-25 {
flex: 0 0 25%;
max-width: 25%;
}
&.column-33,
&.column-34 {
&.col-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
&.column-40 {
&.col-40 {
flex: 0 0 40%;
max-width: 40%;
}
&.column-50 {
&.col-50 {
flex: 0 0 50%;
max-width: 50%;
}
&.column-60 {
&.col-60 {
flex: 0 0 60%;
max-width: 60%;
}
&.column-66,
&.column-67 {
&.col-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
&.column-75 {
&.col-75 {
flex: 0 0 75%;
max-width: 75%;
}
&.column-80 {
&.col-80 {
flex: 0 0 80%;
max-width: 80%;
}
&.column-90 {
&.col-90 {
flex: 0 0 90%;
max-width: 90%;
}
// .column-* vertically aligns an individual .column
.column-top {
// .col-* vertically aligns an individual .col
.col-top {
align-self: flex-start;
}
.column-bottom {
.col-bottom {
align-self: flex-end;
}
.column-center {
.col-center {
align-self: center;
}
}
@ -161,7 +157,7 @@
width: calc(100% + 2.0rem);
margin-left: -1.0rem;
.column {
.col {
margin-bottom: inherit;
padding: 0 1.0rem;
}