https://github.com/judus/grid-scss

Mixins for CSS grids
https://github.com/judus/grid-scss

Last synced: 3 months ago
JSON representation

Mixins for CSS grids

• Host: GitHub
• URL: https://github.com/judus/grid-scss
• Owner: judus
• License: mit
• Created: 2018-09-12T18:31:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-14T08:06:30.000Z (over 6 years ago)
• Last Synced: 2024-04-27T05:22:20.076Z (about 1 year ago)
• Language: CSS
• Homepage:
• Size: 9.77 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# grid-scss

Mixins for CSS grids

#### Install npm

```text

npm i maduser-grid-scss

```

#### Using flex-box:

4 columns of equal size with children elements 

```scss

  .container {

    @include grid-cols(4);

  }

```

3 columns with specific sizes

```scss

  .container {

    @include grid-flex;

  }

  .column-left {

    @include grid-col(25%);

  }

  .column-center {

    @include grid-col(50%);

  }

  

  .column-right {

    @include grid-col(25%);

  }

```

#### Using rows and cols, no flex:

6 columns of equal size

```scss

  .container {

    @include grid-container;

  }

  .row {

    @include grid-row;

  }

  .column {

    @include grid-col(16.6666%);

  }

```