### Build and Launch Website with Docker Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Installs Node.js dependencies and starts the development server using Docker Compose. The website will be accessible at http://localhost:3000. ```bash docker-compose run --rm node npm install ``` ```bash docker-compose run --rm -p 3000:3000 node npm run serve ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Installs project dependencies using npm. Run this after cloning the repository. ```bash npm install ``` -------------------------------- ### Install Node.js and npm Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Installs Node.js and npm using yum. This is a prerequisite for local development. ```bash sudo yum install nodejs npm ``` -------------------------------- ### Start Development Server Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Starts the development server to preview the project locally. Access the site at http://localhost:3000. ```bash npm run serve ``` -------------------------------- ### Install Flexbox Grid Mixins with Yarn Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Use this command to install the mixins as a development dependency using Yarn. ```bash $ yarn add flexbox-grid-mixins --dev ``` -------------------------------- ### Install Flexbox Grid Mixins with npm Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Use this command to install the mixins as a development dependency using npm. ```bash $ npm install flexbox-grid-mixins --save-dev ``` -------------------------------- ### Multi-line Grid using UL Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Example of a multi-line grid implemented using an unordered list. ```html * 3 * 3 * 3 * 3 * 3 * 3 * 3 * 3 * 3 * 3 * 3 * 3 * 3 * 3 ``` -------------------------------- ### Full Grid System Example (LibSass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Illustrates generating a full 12-column grid system with various column combinations using LibSass. This approach is useful for creating flexible and responsive layouts. ```html
12
1
11
2
10
3
9
4
8
5
7
6
6
``` ```sass @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; $default-grid-columns: 12; $default-grid-gutter: 2%; .grid { @include grid($gutter: $default-grid-gutter); @for $i from 1 through $default-grid-columns { > .grid__col-#{$i} { @include grid-col($col: $i, $grid-columns: $default-grid-columns, $gutter: $default-grid-gutter); } } } ``` -------------------------------- ### Unit-Set Grid with $gutter: 12px Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Demonstrates the Unit-Set Grid when only the gutter is defined with a pixel value. This setup is suitable for fixed-width layouts. ```scss $gutter: 12px; .grid-1 { @include grid-set(1, $gutter); } .grid-2 { @include grid-set(2, $gutter); } .grid-3 { @include grid-set(3, $gutter); } .grid-4 { @include grid-set(4, $gutter); } .grid-5 { @include grid-set(5, $gutter); } .grid-6 { @include grid-set(6, $gutter); } .grid-7 { @include grid-set(7, $gutter); } .grid-8 { @include grid-set(8, $gutter); } .grid-9 { @include grid-set(9, $gutter); } .grid-10 { @include grid-set(10, $gutter); } .grid-11 { @include grid-set(11, $gutter); } .grid-12 { @include grid-set(12, $gutter); } ``` -------------------------------- ### Full Grid System Example (Dart Sass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Illustrates generating a full 12-column grid system with various column combinations using Dart Sass. This approach is useful for creating flexible and responsive layouts. ```html
12
1
11
2
10
3
9
4
8
5
7
6
6
``` ```sass @use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-columns: 12; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); @for $i from 1 through $default-grid-columns { > .grid__col-#{$i} { @include flexbox-grid-mixins.grid-col($col: $i, $grid-columns: $default-grid-columns, $gutter: $default-grid-gutter); } } } ``` -------------------------------- ### Unit-Set Grid with Different Units (col: em, gutter: px) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Demonstrates the Unit-Set Grid with columns in 'em' units and gutters in pixels. This setup offers fluid column sizing based on font size, with fixed spacing between elements. ```scss $col: 30em, $gutter: 15px; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Unit-Set Grid with Different Units (% Col, px Gutter) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set.html Illustrates the Unit-Set grid with percentage-based columns and pixel-based gutters. This setup relies on CSS calc() for accurate rendering. ```scss $col: 25%, $gutter: 15px; .grid-1 { @include grid-set(1); } .grid-2 { @include grid-set(2); } ``` -------------------------------- ### Flexbox Grid Order Examples Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example.html Illustrates how to change the visual order of flex items within a grid. This is useful for responsive design or specific layout requirements. ```scss @include grid-col($order: 1) ``` ```scss @include grid-col($order: 2) ``` ```scss @include grid-col($order: 3) ``` ```scss @include grid-col($order: 4) ``` ```scss @include grid-col($order: 5) ``` -------------------------------- ### Items Row Alignment: flex-start Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example.html Aligns items to the start of the row using `$align-self: flex-start`. ```scss $align-self: flex-start Top ``` -------------------------------- ### Flexbox Grid Alignment Examples Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example.html Demonstrates different alignment options for flex items within a grid. Use these mixins to control the vertical alignment of items. ```scss @include grid($align-self: null) ``` ```scss @include grid($align-self: auto) ``` ```scss @include grid($align-self: flex-start) ``` ```scss @include grid($align-self: center) ``` ```scss @include grid($align-self: flex-end) ``` -------------------------------- ### Auto Margin Example Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/auto-margin.html Illustrates the use of auto margins for distributing space in a flex container. This is useful for pushing items to the edges or centering them. ```sass /* Auto margin */ .auto-margin { @include auto-margin; } ``` -------------------------------- ### Column Alignment: Left Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Aligns grid items to the start of the column using `@include grid($align-items: flex-start);`. ```scss @include grid($align-items: flex-start); ``` ```html 1 2 3 ``` -------------------------------- ### Items Row Alignment flex-start Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Aligns an individual item to the start of the row using `$align-self: flex-start;`. ```scss $align-self: flex-start Top ``` -------------------------------- ### LibSass Grid Mixins Implementation Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Example of using Flexbox Grid Mixins with LibSass to define a grid and column styles. Requires importing the mixins and setting a gutter width. ```sass @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include grid($gutter: $default-grid-gutter); > .grid__col-3 { @include grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include grid-col($col: 9, $gutter: $default-grid-gutter); } } ``` -------------------------------- ### Items Row Alignment: flex-start Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Aligns items to the start of the cross axis using `$align-self: flex-start;`. ```scss $align-self: flex-start ``` ```html Top ``` -------------------------------- ### Import Flexbox Grid Mixins (LibSass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Import the mixins into your Sass/SCSS file when using LibSass. This example shows importing from node_modules. ```scss @import 'flexbox-grid-mixins'; ``` ```scss @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; ``` -------------------------------- ### Row Alignment: Left Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Aligns grid items to the start of the row using `@include grid($justify-content: flex-start);`. ```scss @include grid($justify-content: flex-start); ``` ```html 1 2 3 ``` -------------------------------- ### Generate Grid Columns (LibSass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Use the `grid-col()` mixin to generate styles for grid columns, specifying the column span. This example uses LibSass. ```scss .grid__col-3 { @include grid-col(3); } .grid__col-9 { @include grid-col(9); } ``` -------------------------------- ### Grid Justify Content Flex-Start - SCSS Mixin Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/test-stick-out.html Aligns flex items to the start of the row. Use this when you want content to be grouped at the beginning of the horizontal axis. ```scss @include grid($justify-content: flex-start); ``` -------------------------------- ### Import Flexbox Grid Mixins (Dart Sass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Import the mixins into your Sass/SCSS file when using Dart Sass. This example shows importing from node_modules. ```scss @use 'flexbox-grid-mixins'; ``` ```scss @use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; ``` -------------------------------- ### Dart Sass Grid Mixins Implementation Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Example of using Flexbox Grid Mixins with Dart Sass to define a grid and column styles. Requires importing the mixins and setting a gutter width. ```sass @use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); > .grid__col-3 { @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter); } } ``` -------------------------------- ### Space Between Row Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/test-stick-out.html Use this mixin to distribute space between items in a row. The first item is at the start, the last item is at the end, and remaining space is distributed evenly between items. ```SCSS @include grid($justify-content: space-between); ``` -------------------------------- ### Generate Grid Columns (Dart Sass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Use the `grid-col()` mixin to generate styles for grid columns, specifying the column span. This example uses Dart Sass. ```scss .grid__col-3 { @include flexbox-grid-mixins.grid-col(3); } .grid__col-9 { @include flexbox-grid-mixins.grid-col(9); } ``` -------------------------------- ### Basic Grid Layout (LibSass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Demonstrates a basic 3-column and 9-column layout using LibSass. Ensure the import path is correct for your project structure. ```html
3
9
``` ```sass @import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include grid($gutter: $default-grid-gutter); > .grid__col-3 { @include grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include grid-col($col: 9, $gutter: $default-grid-gutter); } } ``` -------------------------------- ### Basic Grid Layout Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Demonstrates a standard 12-column grid layout. ```html 12 1 11 2 10 3 9 4 8 5 7 6 6 ``` -------------------------------- ### Unit-Set Grid with Different Units (col: px, gutter: %) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Demonstrates the Unit-Set Grid with columns in pixels and gutters in percentages. This combination leverages CSS calc() for flexible spacing within fixed column widths. ```scss $col: 200px, $gutter: 5%; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Unit-Set Grid with Different Units (col: %, gutter: px) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Illustrates the Unit-Set Grid using percentages for columns and pixels for gutters. This allows columns to fluidly adjust to container width while maintaining consistent pixel-based spacing. ```scss $col: 25%, $gutter: 15px; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Grid Column Preset: initial Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Demonstrates the usage of `@include grid-col($col: initial);` for grid columns. ```scss @include grid-col($col: initial); ``` ```html initial 3 3 initial initial initial initial initial initial initial initial initial initial initial initial initial 3 3 ``` -------------------------------- ### List Available npm Tasks Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Lists all available npm scripts defined in the package.json file using Docker Compose. ```bash docker-compose run --rm node npm run ``` -------------------------------- ### Unit-Set Grid with Same Units for $col and $gutter (em) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Demonstrates the Unit-Set Grid with both column and gutter defined in 'em' units. This creates a responsive grid that scales with the parent font size. ```scss $col: 30em, $gutter: 2em; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Unit-Set Grid with Different Units (col: px, gutter: em) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Illustrates the Unit-Set Grid using pixels for columns and 'em' units for gutters. This mix allows for fixed column sizes with fluid spacing relative to font size. ```scss $col: 200px, $gutter: 2em; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Unit-Set Grid with Different Units (em Col, px Gutter) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set.html Demonstrates the Unit-Set grid where columns are in em units and gutters are in pixels. CSS calc() is used to manage the different unit types. ```scss $col: 30em, $gutter: 15px; .grid-1 { @include grid-set(1); } .grid-2 { @include grid-set(2); } ``` -------------------------------- ### 3 Columns Grid Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Demonstrates a grid configured with 3 columns. ```html 3 1 / 3 2 / 3 ``` -------------------------------- ### Unit-Set Grid with Different Units (col: number, gutter: px) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Shows the Unit-Set Grid using a unitless number for columns and pixels for the gutter. This requires CSS calc() and is experimental. ```scss $col: 4, $gutter: 40px; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Unit-Set Grid with Different Units (col: %, gutter: em) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Shows the Unit-Set Grid with columns in percentages and gutters in 'em' units. This combination creates a responsive layout where column widths adapt to the container, and spacing scales with font size. ```scss $col: 25%, $gutter: 2em; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Grid Column Preset: equal Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Demonstrates using `@include grid-col($col: equal);` for equal-width grid columns. ```scss @include grid-col($col: equal); ``` ```html equal 3 3 equal equal equal equal equal equal equal equal equal equal equal 3 3 ``` -------------------------------- ### Unit-Set Grid with Same Units for $col and $gutter (%) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Illustrates the Unit-Set Grid where both column and gutter are defined as percentages. This is ideal for fluid layouts that adapt to container width. ```scss $col: 25%, $gutter: 5%; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Unit-Set Grid with $gutter: 2em Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Illustrates the Unit-Set Grid when the gutter is defined using relative 'em' units. This provides more fluid spacing that scales with font size. ```scss $gutter: 2em; .grid-1 { @include grid-set(1, $gutter); } .grid-2 { @include grid-set(2, $gutter); } .grid-3 { @include grid-set(3, $gutter); } .grid-4 { @include grid-set(4, $gutter); } .grid-5 { @include grid-set(5, $gutter); } .grid-6 { @include grid-set(6, $gutter); } .grid-7 { @include grid-set(7, $gutter); } .grid-8 { @include grid-set(8, $gutter); } .grid-9 { @include grid-set(9, $gutter); } .grid-10 { @include grid-set(10, $gutter); } .grid-11 { @include grid-set(11, $gutter); } .grid-12 { @include grid-set(12, $gutter); } ``` -------------------------------- ### Nesting Grid Layout Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Shows how to create nested grid structures. ```html 6 6 3 3 3 3 2 10 2 10 2 10 2 10 ``` -------------------------------- ### Wrap Alignment: null Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Demonstrates grid wrap alignment with the default (null) setting. ```scss @include grid($flex-wrap: null); ``` ```html 1 2 3 3 3 2 2 ``` -------------------------------- ### Unit-Set Grid with Same Units for $col and $gutter (px) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Shows the Unit-Set Grid where both column and gutter are defined in pixels. This is useful for precise, fixed-width layouts. ```scss $col: 200px, $gutter: 15px; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Basic Grid Layout (Dart Sass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Demonstrates a basic 3-column and 9-column layout using Dart Sass. Ensure the mixin path is correct for your project structure. ```html
3
9
``` ```sass @use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); > .grid__col-3 { @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter); } } ``` ```css .grid { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -1%; margin-right: -1%; } .grid > .grid__col-3 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 23%; flex: 0 0 23%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .grid > .grid__col-9 { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 73%; flex: 0 0 73%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } ``` -------------------------------- ### Unit-Set Grid with Different Units (em Col, % Gutter) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set.html Shows the Unit-Set grid with em units for columns and percentage units for gutters. This combination utilizes CSS calc() for layout calculations. ```scss $col: 30em, $gutter: 5%; .grid-1 { @include grid-set(1); } .grid-2 { @include grid-set(2); } ``` -------------------------------- ### Unit-Set Grid with Different Units (col: em, gutter: %) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set-margin-offset.html Shows the Unit-Set Grid with columns in 'em' units and gutters in percentages. This provides a responsive layout where column sizes scale with font size and spacing adapts to container width. ```scss $col: 30em, $gutter: 5%; .grid-1 { @include grid-set(1, $col, $gutter); } .grid-2 { @include grid-set(2, $col, $gutter); } ``` -------------------------------- ### Unit-Set Grid with Different Units (% Col, em Gutter) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set.html Shows the Unit-Set grid when columns are defined as percentages and gutters as em units. CSS calc() is essential for handling these mixed units. ```scss $col: 25%, $gutter: 2em; .grid-1 { @include grid-set(1); } .grid-2 { @include grid-set(2); } ``` -------------------------------- ### Equal Size Grid Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Demonstrates a grid where all columns have equal width. ```html equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal equal ``` -------------------------------- ### Grid Column Preset: none Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Shows the usage of `@include grid-col($col: none);` for grid columns. ```scss @include grid-col($col: none); ``` ```html none 3 3 none none none none none none none none none none none none none 3 3 ``` -------------------------------- ### Unit-Set Grid with Same Units for Col and Gutter (px) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/unit-set.html Shows the Unit-Set grid where both column and gutter are defined in pixels. This ensures consistent sizing when using pixel-based layouts. ```scss $col: 200px, $gutter: 15px; .grid-1 { @include grid-set(1); } .grid-2 { @include grid-set(2); } ``` -------------------------------- ### Grid Column Preset: auto Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Shows the usage of `@include grid-col($col: auto);` for auto-sizing grid columns. ```scss @include grid-col($col: auto); ``` ```html auto 3 3 auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto 3 3 ``` -------------------------------- ### 24 Columns Grid Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Illustrates a grid layout using 24 columns. ```html 24 2 / 24 2 / 24 2 / 24 2 / 24 2 / 24 2 / 24 2 / 24 2 / 24 2 / 24 2 / 24 2 / 24 4 / 24 4 / 24 4 / 24 4 / 24 4 / 24 4 / 24 8 / 24 8 / 24 8 / 24 12 / 24 12 / 24 ``` -------------------------------- ### Default 12 Columns Grid Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Shows a grid with default 12 columns. ```html 12 6 / 12 6 / 12 3 / 12 9 / 12 ``` -------------------------------- ### Set Preset Grid Columns Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Utilize preset keywords for the `$col` argument to define column behavior, such as `initial`, `auto`, `equal`, `none`, or `positive`. ```scss $col: initial | auto | equal | none | positive ``` -------------------------------- ### Grid Column Preset: Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Illustrates using a numeric value with `@include grid-col($col: );`. ```scss @include grid-col($col: ); ``` ```html 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 ``` -------------------------------- ### Row Order Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Demonstrates the default order of items in a row. ```html 1 2 3 4 5 ``` -------------------------------- ### Grid Column Preset: null Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Shows the usage of `@include grid-col($col: null);` for grid columns. ```scss @include grid-col($col: null); ``` ```html 3 3 null null null null null null null null null null null null null null null null null null null 3 3 ``` -------------------------------- ### Grid Column with Number value Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Illustrates setting a specific number of columns using `@include grid-col($col: );` for precise layout control. ```scss @include grid-col($col: ); 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 ``` -------------------------------- ### Items Alignment: Top Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Aligns grid items to the top of their container using `@include grid($align-items: flex-start);`. ```scss @include grid($align-items: flex-start); ``` ```html 1 1 1 1 1 1 2 3 3 3 ``` -------------------------------- ### Define Gutters using Gap Property Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Use the `$gap` argument to define gutters between rows and columns via the CSS `gap` property. `null` results in no gaps. ```scss $gap: null | | ``` -------------------------------- ### Grid Width with $max-width Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Shows how to set the maximum width for grid items using the $max-width Sass variable. This ensures items do not exceed a specified width. ```scss $max-width: 200px ``` ```scss $max-width: 100px ``` -------------------------------- ### Wrap Alignment: wrap Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Enables wrapping of grid items using `@include grid($flex-wrap: wrap);`. ```scss @include grid($flex-wrap: wrap); ``` ```html 1 2 3 3 3 2 2 ``` -------------------------------- ### Define Grid Container (LibSass) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Use the `grid()` mixin to define the styles for a grid container. This is used with LibSass. ```scss .grid { @include grid(); } ``` -------------------------------- ### Grid Column Preset: positive number Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Illustrates using positive numbers with `@include grid-col` for flexible sizing. ```html grow: 1 grow: 2 grow: 1 grow: 2 grow: 3 grow: 1 grow: 2 grow: 1 grow: 2 grow: 4 ``` -------------------------------- ### Define Gutters using Margin Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Control the spacing between grid items using the `$gutter` argument, which applies margin CSS properties. `null` means no margin. ```scss $gutter: null | | ``` -------------------------------- ### Multi-line Flexbox Grid Alignment Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example.html Shows how to align lines of flex items when they wrap onto multiple lines. This controls the distribution of space along the cross-axis. ```scss @include grid($align-content: flex-start) ``` ```scss @include grid($align-content: center) ``` ```scss @include grid($align-content: flex-end) ``` ```scss @include grid($align-content: space-between) ``` ```scss @include grid($align-content: space-around) ``` ```scss @include grid($align-content: stretch) ``` -------------------------------- ### grid Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Defines the grid container with various flexbox properties. ```APIDOC ## @include grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null) ### Description Defines the grid container. ### Arguments | Argument | Default value | Values | |---|---|---| | $display | flex | flex | inline-flex | | $flex-direction | null | null | row | row-reverse | column | column-reverse | | $flex-wrap | null | null | nowrap | wrap | wrap-reverse | | $flex-flow | null | null | [row | row-reverse | column | column-reverse] [nowrap | wrap | wrap-reverse] | | $justify-content | null | null | flex-start | flex-end | center | space-between | space-around | space-evenly | | $align-items | null | null | flex-start | flex-end | center | baseline | stretch | | $align-content | null | null | flex-start | flex-end | center | space-between | space-around | stretch | | $gutter | null | null | | | | $gap | null | null | | | | $row-gap | null | null | | | | $column-gap | null | null | | | ### Description - `$display`: generate a block-level or an inline-level grid container. - `$flex-direction`: define the main axis and the direction. - `$flex-wrap`: whether flex items are forced into a single line or can be wrapped onto multiple lines. - `$flex-flow`: a shorthand for setting the flex-direction and flex-wrap properties. - `$justify-content`: defines space between and around content items along the main-axis of container. - `$align-items`: defines space between and around flex items along the cross-axis of container. - `$align-content`: defines space between and around content items along the cross-axis of their container. - `$gutter`: define gutters using margin CSS property. `null` is no margin of both ends of the grid. `` generate a margin of both ends of the grid. `` generate a margin of both ends of the grid (`` is experimental stage). - `$gap`: define gutters using [gap CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). `null` is no gaps between rows and columns. `` generate a gaps between rows and columns. `` generate a gaps between rows and columns. - `$row-gap`: define row gutter using [row-gap CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap). `null` is no gaps between rows and columns. `` generate a gaps between rows and columns. `` generate a gaps between rows and columns. - `$column-gap`: define column gutter using [column-gap CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). `null` is no gaps between rows and columns. `` generate a gaps between rows and columns. `` generate a gaps between rows and columns. ### Example ```scss @include grid( $display: flex, $flex-direction: row, $flex-wrap: nowrap, $justify-content: space-between, $align-items: center, $gutter: 1rem ); ``` ``` -------------------------------- ### Define Grid Container with Flexbox Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Use the `grid` mixin to establish a flexbox grid container. It accepts various arguments to control display, direction, wrapping, alignment, and gutters. ```scss @include grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null); ``` -------------------------------- ### Multi-line Alignment Top Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Aligns multiple lines of wrapped items to the top of the container using `@include grid($align-content: flex-start);`. ```scss @include grid($align-content: flex-start); 1 1 1 2 3 3 4 4 5 5 6 ``` -------------------------------- ### Wrap Alignment: wrap-reverse Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Configures the grid to wrap items in reverse order using `@include grid($flex-wrap: wrap-reverse);`. ```scss @include grid($flex-wrap: wrap-reverse); ``` ```html 1 2 3 3 3 2 2 ``` -------------------------------- ### Define Total Grid Columns Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Set the total number of columns available in the grid layout using the `$grid-columns` argument. The default is 12 columns. ```scss $grid-columns: ``` -------------------------------- ### Grid with Stretch Alignment Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Use this mixin to stretch items to fill the available space along the main axis. This is typically used when items should occupy the full height or width of their container. ```scss @include grid($align-content: stretch); ``` -------------------------------- ### Create a Feature Branch Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Creates a new Git branch for developing a new feature. Replace 'my-new-feature' with your feature's name. ```git git checkout -b my-new-feature ``` -------------------------------- ### HTML Grid Structure Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/README.md Basic HTML structure for a two-column grid layout using 'grid' and 'grid__col' classes. ```html
3
9
``` -------------------------------- ### No Wrap - @include grid($flex-wrap: nowrap) Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/test-stick-out.html Use this mixin to prevent grid items from wrapping to the next line. All items will remain on a single line, which can lead to overflow if the container is too narrow. ```scss @include grid($flex-wrap: nowrap); ``` -------------------------------- ### Grid with Space Around Alignment Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Apply this mixin to distribute items evenly along the main axis with equal space around them. This ensures that there is space before the first item and after the last item. ```scss @include grid($align-content: space-around); ``` -------------------------------- ### Set Flex Basis for Grid Column Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Define the initial size of grid columns before the remaining space is distributed using the `$flex-basis` argument. Defaults to `auto`. ```scss $flex-basis: auto | | | 0 ``` -------------------------------- ### Grid Column with none value Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Illustrates using `@include grid-col($col: none);` which likely disables column behavior or resets it. ```scss @include grid-col($col: none); 3 3 none none none none none none none none none none none none none 3 3 ``` -------------------------------- ### Grid Alignment with $align-content Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Illustrates different alignment strategies for grid lines using the $align-content Sass variable. This affects how lines are packed within the grid container when there's extra space. ```scss @include grid($align-content: flex-start); ``` ```scss @include grid($align-content: center); ``` ```scss @include grid($align-content: flex-end); ``` ```scss @include grid($align-content: space-between); ``` ```scss @include grid($align-content: space-around); ``` ```scss @include grid($align-content: stretch); ``` -------------------------------- ### Auto Size Grid Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example-margin-offset.html Shows a grid where columns automatically adjust their size. ```html auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto ``` -------------------------------- ### Set Grid Columns by Width Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/index.html Define the width of a grid item using the `$col` argument with a width value. Note that using CSS `calc()` with length units for gutters is experimental. ```scss $col: ``` -------------------------------- ### Grid Column with positive number value Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Demonstrates using positive numbers with `@include grid-col($col: positive);` for flexible column sizing and growth. ```scss @include grid-col($col: positive); grow: 1 grow: 2 grow: 1 grow: 2 grow: 3 grow: 1 grow: 2 grow: 1 grow: 2 grow: 4 ``` -------------------------------- ### Centered Row Alignment Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/test-stick-out.html This section demonstrates centered row alignment, though no specific mixin is shown. -------------------------------- ### Grid with Space Between Alignment Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/gap.html Use this mixin to distribute items evenly along the main axis with space between them. This is useful for creating layouts where items should have equal spacing. ```scss @include grid($align-content: space-between); ``` -------------------------------- ### Condense Grid Column Mixin Source: https://github.com/thingsym/flexbox-grid-mixins/blob/master/docs/example-dart-sass/example.html Demonstrates the 'condense' option for the grid column mixin. This utility is used to adjust column widths for a more compact layout. ```scss @include grid-col($condense: true) ```