1. The document discusses CSS grid layout and how it can be used to create page layouts without a framework by leveraging browser support. It covers basic concepts like grid containers, grid items, and grid lines. 2. Examples are provided of creating a mosaic image gallery and responsive grid templates using CSS grid properties like repeat and minmax. 3. CSS grid allows defining grid areas and different layouts can be created from the same markup. Alignment of individual grid items can also be controlled.

1. 1

2. 2D Page Layout
Layout-ing the page leveraging browser support
without using framework.

3. Table of content
● Let's recap our web
● Comparison to Bootstrap 4
● Concepts - Grid container
● Concepts - Grid items
● Examples:
● Mosaic view of image
● CSS Grid layout template
● ​Is browsers ready ?

4. Let’s Recap
1991
1993

5. <div> with float 1997
CSS GRID
2014
2017

6. Comparison to Bootstrap 4
https://jagatjeevan.github.io/css-grid
Let's re-arrange things in the above mentioned url and see
how easy it is in both.

7. Concepts of Css grid
Container : A container where "display: grid" is declared.
Grid item : Immediate children to the grid container.
Grid line : Separation of the grid cells.
Grid track : The flow of
cells in a direction.

8. Concepts of Css grid
Grid cell : Each cell in a row.
Grid area : Combinations of cells.

9. Creating our first grid
To create our first grid, we need to:
1. Tell the browser, where to start for css grid.
2. Tell how many rows you want
3. Tell how many columns you want for each row.
https://jagatjeevan.github.io/css-grid/1.html

10. Making our grid fluid and responsive
Use normal way, for making any layout fluid and responsive.
1. % values
2. Repeat : repeat(3, 33%)
3. Minmax: minmax(300px, 1fr)
https://jagatjeevan.github.io/css-grid/2.html

11. Making our own grid system
It would be easy to have our own grid system with minimal
code rather than a bulky framework.
1. Template columns
2. Repeat the columns that you require.
https://jagatjeevan.github.io/css-grid/4.html

12. Aligning all the content
You can align all the content of the container along the row-
axis
.container {
Justify-items: start | end | center | stretch;
}

13. Aligning all the content
You can align all the content of the container along the
column-axis
.container {
align-items: start | end | center | stretch;
}

14. Word of caution
Before we proceed, just a note of caution, while using css
grid property, all the below css property will not affect the
grid items (immediate children).
float, display: inline-block, display: table-cell, vertical-align
and column-*.

15. Defining a grid area
.item {
grid-column-start: 2
grid-column-end: 5
grid-row-start: 1
grid-row-end: 3
}
Values could be:
● <number>
● <name>
● span <number>
● span <name>
● Auto
https://prakashup.github.io/css-grid/grid-area.html

16. Different layout with same markup
You can now cater to different clients design using the
same markup. Let’s see an example.
https://prakashup.github.io/css-grid/positioning.html

17. Alignment of specific content
You can target to align a specific item to be horizontally
aligned separately by:
.item-a {
justify-self: start | end | center | stretch;
}

18. Alignment of specific content
You can target to align a specific item to be vertically aligned
separately by:
.item-a {
align-self: start | end | center | stretch;
}

19. Summing up to an example
Let’s put all the things that we have just learn together to an
example of a mosaic view of the image gallery. Majorly we
use some jquery / javascript plugin for making it consume all
the view space.
https://jagatjeevan.github.io/css-grid/image-gallery.html

20. Let’s create a simple layout
https://prakashup.github.io/css-grid/

21. Is this ready for production ?
https://caniuse.com/#search=css%20grid

22. https://scrimba.com/g/gR8PTE
https://css-tricks.com/snippets/css/complete-guide-grid/
References

23. Short discussion
?

24. THANK YOU
Prakash Upadhyay
UI Developer, ThoughtWorks
prakashupadhyay770@gmail.com
github.com/prakashup
@prakashup
Jagat Jeevan Sahoo
UI Developer, ThoughtWorks
kanhajeevan@gmail.com
github.com/jagatjeevan
@JagatJeevan3