CSS Flex & Grid
In this blog we are going to learn about Flex and Grid in CSS and their various properties.
Flex-Box
CSS Flex-Box layout allows you to easily format HTML. Flex-Box makes it simple to align items vertically and horizontally using rows and columns. Items will “flex” to different sizes to fill the space. It makes responsive design easier.
Flex-Box can be used for few main things like scaling, vertically and horizontally aligning, and reordering of the elements in a container.
Properties Of Flex-Box
1. Display
It tells the browser that I want to use flex with this container. It is applied to parent container so all the items in the container will have flex properties.
display: flex
2. Flex Direction
a. flex-direction: row
b. flex-direction: row-reverse
c. flex-direction: column
d. flex-direction: column-reverse
3. Justify Content
a. justify-content: flex-start
b. justify-content: flex-end
c. justify-content: center
d. justify-content: space-between
e. justify-content: space-around
4. Align Self
a. align-self: auto
b. align-self: flex-start
c. align-self: flex-end
d. align-self: center
e. align-self: baseline
f. align-self: stretch
5. Flex Wrap
a. flex-wrap: wrap
b. flex-wrap: nowrap
c. flex-wrap: wrap-reverse
6. Flex Flow
combines the flex-direction and flex-wrap
7. Align Content
a. align-content: flex-start
b. align-content: flex-end
c. align-content: center
d. align-content: stretch
e. align-content: space-between
f. align-content: space-around
8. Align Items
a. align-items: flex-start
b. align-items: flex-end
c. align-items: stretch
d. align-items: center
e. align-items: baseline
9. Align Self
a. align-self: auto
b. align-self: flex-start
c. align-self: flex-end
d. align-self: center
e. align-self: baseline
f. align-self: stretch
10. Flex Grow
a. flex-grow: <integer>
11. Flex Shrink
a. flex-shrink: <integer>
12. Order
a. order: <integer>
13. Flex Basis
a. flex-basis: auto
b. flex-basis: <integer>px
Grid
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. For example, a grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
Properties Of Grid
1. Grid Area
a. grid-area: auto
b. grid-area: main
2. Grid Auto Column
a. grid-auto-columns: auto
b. grid-auto-columns: <integer>px
3. Grid Auto Row
a. grid-auto-row: auto
b. grid-auto-row: <integer>px
4. Grid Auto Flow
a. grid-auto-flow: row
b. grid-auto-flow: column
5. Grid Column Start
a. grid-column-start: auto
b. grid-column-start: <integer>
6. Grid Column End
a. grid-column-end: auto
b. grid-column-end: <integer>
7. Grid Column Gap
a. grid-column-gap: <integer>px
b. grid-column-gap: <integer>rem
c. grid-column-gap: <integer>%
8. Grid Column
Short-hand property for grid-column-start and grid-column-end
9. Grid Row Start
a. grid-row-start: auto
b. grid-row-start: <integer>
10. Grid Row End
a. grid-row-end: auto
b. grid-row-end: <integer>
11. Grid Row
Short-hand property for grid-row-start and grid-row-end
12. Grid Row Gap
a. grid-row-gap: <integer>px
b. grid-row-gap: <integer>rem
13. Grid Gap
Short-hand property for grid-row-gap and grid-column-gap
14. Grid Template Columns
a. grid-template-columns: none
b. grid-template-columns: auto auto auto
c. grid-template-columns: <integer>px/rem/fr <integer>px/rem/fr <integer>px/rem/fr
15. Grid Template Rows
a. grid-template-rows: none
b. grid-template-rows: auto auto auto
c. grid-template-rows: <integer>px/rem/fr <integer>px/rem/fr <integer>px/rem/fr
16. Grid Template Areas
a. grid-template-areas: none
b. grid-template-areas: “header header header” “sidebar sidebar main”. You can use the names to specify which area the items should occupy.
17. Grid Template
Short-hand property for grid-template-rows, grid-template-columns and grid-template-area
18. Grid
Short-hand property for grid-template-rows, grid-template-columns, grid-template-area, grid-auto-rows, grid-auto-columns and grid-auto-flow
