https://github.com/zhentian-wan/grid-layout-demo

Learn how to use grid layout system
https://github.com/zhentian-wan/grid-layout-demo

css3 grid-layout

Last synced: about 2 months ago
JSON representation

Learn how to use grid layout system

• Host: GitHub
• URL: https://github.com/zhentian-wan/grid-layout-demo
• Owner: zhentian-wan
• Created: 2017-03-26T20:21:27.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T23:46:38.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T19:50:10.850Z (9 months ago)
• Topics: css3, grid-layout
• Language: HTML
• Homepage:
• Size: 370 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Advanced layout system demo

In this repo, we are going to learn advanced layout system such as grid layout and flex layout.

Also including some lib demo for easy layout our website.

    

## Content

  * [Grid Layout](grid-layout-lessones)

    * [01 Grid basic](grid-layout-lessones/01-getting-up-running-grid-layout)

    * [02 Grid columns and Grid rows](grid-layout-lessones/02-css-place-grid-items-on-a-grid-using-grid-column-and-grid-row)

    * [03 Grid gap](grid-layout-lessones/03-css-specify-a-grid-gutter-size-with-grid-gap)

    * [04 Grid named line](grid-layout-lessones/04-ss-describe-a-grid-layout-using-named-grid-lines)

    * [05 Grid template areas](grid-layout-lessones/05-css-describe-a-grid-layout-using-grid-template-areas)

    * [06 Grid minmax](grid-layout-lessones/06-use-the-minmax-function-to-specify-dynamically-sized-tracks)

    * [07 Grid repeat basic](grid-layout-lessones/07-use-the-repeat-function-to-efficiently-write-grid-template-values)

    * [08 Grid repeat with auto-fill or auto fit](grid-layout-lessones/08-use-auto-fill-and-auto-fit-if-the-number-of-repeated-grid-tracks-is-not-to-be-def)

    * [09 Grid auto-flow](grid-layout-lessones/09-change-the-auto-placement-behaviour-of-grid-items-with-grid-auto-flow)

    * [10 Grid ordering](grid-layout-lessones/10-using-order)

    * [11 Grid nesting grid layout](grid-layout-lessones/11-nest-a-grid-within-a-grid)

    * [12 Grid template shorthand](grid-layout-lessones/12-specify-grid-columns-rows-and-areas-at-once-with-the-grid-template-shorthand)

  

  * [Flex layout](flex-layout-lessons)

    * [01 flex direcction](flex-layout-lessons/01-flex-direction)

    * [02 justify content](flex-layout-lessons/02-justify-content)

    

  * [SCSS](scss-lessons)

    * [01 Install node-sass](scss-lessons/01-install.scss)

    * [02 Partial file and variable](scss-lessons/02-organize-scss-into-multiple-files-with-partials)

    * [03 Parent selector](scss-lessons/03-parent-selector)

    * [04 Color fns](scss-lessons/04-color-fns)

    * [05 @mixin & @content](scss-lessons/05-mixin)

    * [06 @extend & #{}](scss-lessons/06-extend)

    * [07 @for loop](scss-lessons/07-for)

    * [08 @each](scss-lessons/08-each)

    * [09 @function](scss-lessons)(09-function)