SlideShare a Scribd company logo
2
A BRIEF HISTORY IN WEBPAGE LAYOUT
First Webpage 1992
Most read
8
CSS GRID LAYOUT TERMINOLOGY
★ Grid Container > Element to which display:grid; is applied.
★ Grid Item > Direct descendants of the grid container.
★ Grid Line > Dividing lines of the grid structure. Horizontal (row)
and vertical (column) lines.
★ Grid Track > The space between two adjacent grid lines.
★ Grid Cell > Single unit. Space between 2 adjacent column and
row grid lines.
★ Grid Area > Total space surrounded by 4 grid lines. Can consists
of a numerous grid cells.
Most read
12
CSS GRID ELEMENT PROPERTIES
★ grid-column-start, grid-column-end, 

grid-row-start, grid-row-end: <number> | <name> | 

span <number> | span <name> | auto
★ grid-column | grid-row: <start-line> / <end-line>
★ grid-area: <name> | <row-start> / <column-start> / <row-
end> / <column-end>
★ justify-self: start | end | center | stretch
★ align-self: start | end | center | stretch
Most read
CSS GRID
LAYOUT
Brave New Web Design
A BRIEF HISTORY IN WEBPAGE LAYOUT
First Webpage 1992
A BRIEF HISTORY IN WEBPAGE LAYOUT
Yahoo! Website 2002Yahoo! Website 1996
A BRIEF HISTORY IN WEBPAGE LAYOUT
Yahoo! Website 2017Yahoo! Website 2009
CSS GRID LAYOUT DEFINITION
A grid is an intersecting set of horizontal and vertical lines. One
set defining rows and one set defining columns. Elements can be
placed onto the grid, respecting these column and row lines.
CSS GRID LAYOUT LEVEL 1 SPECIFICATION
★ Two-dimensional grid-based layout system.
★ Fixed track sizes (px) and/or flexible track sizes (%, fr).
★ Precise item placement through line numbers, names or areas. 

Algorithm for non-defined items included.
★ Automated creation of additional tracks to hold content e.g. 

add as many rows as will fit in container.
★ Alignment control of grid and grid elements.
★ Overlapping content control through z-index.
CSS GRID LAYOUT SUPPORT
Source: caniuse.com 2.08.2017
CSS GRID LAYOUT TERMINOLOGY
★ Grid Container > Element to which display:grid; is applied.
★ Grid Item > Direct descendants of the grid container.
★ Grid Line > Dividing lines of the grid structure. Horizontal (row)
and vertical (column) lines.
★ Grid Track > The space between two adjacent grid lines.
★ Grid Cell > Single unit. Space between 2 adjacent column and
row grid lines.
★ Grid Area > Total space surrounded by 4 grid lines. Can consists
of a numerous grid cells.
CSS GRID LAYOUT TERMINOLOGY
CSS GRID CONTAINER PROPERTIES
★ display: grid | inline-grid | subgrid
★ grid-template-columns: <track-size> ... | <line-name> <track-
size> …
★ grid-template-rows <track-size> ... | <line-name> <track-
size> …
★ grid-column-gap | grid-row-gap <line-size>
★ grid: none | <grid-template-rows> / <grid-template-columns> |
<grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]]
★ justify-items | align-items: start | end | center | stretch
★ justify-content | align-content: start | end | center | stretch
CSS GRID FUNCTIONS
★ MinMax()

grid-auto-rows

with a minimum height (px) but expanding with content (auto).
★ Auto-placement and order 

grid-auto-flow: column | row | dense

By default items are laid out by row.
★ Flexible filling of tracks 

auto-fit | auto-fill

Use in combination with minmax() to achieve flexible filling of
tracks on grid in viewport.
★ and many more …
CSS GRID ELEMENT PROPERTIES
★ grid-column-start, grid-column-end, 

grid-row-start, grid-row-end: <number> | <name> | 

span <number> | span <name> | auto
★ grid-column | grid-row: <start-line> / <end-line>
★ grid-area: <name> | <row-start> / <column-start> / <row-
end> / <column-end>
★ justify-self: start | end | center | stretch
★ align-self: start | end | center | stretch
CSS GRID LAYOUT RESOURCES
★ Great work by Rachel Andrew: https://gridbyexample.com/
★ Rachel Andrew’s Website & Blog: https://rachelandrew.co.uk/
★ Rachel Andrew’s Weekly Newsletter: http://csslayout.news/
★ Jen Simmons Work on CSS: http://jensimmons.com/
★ Jen Simmons Lab with Examples: http://labs.jensimmons.com/
★ Mozilla Developer Network Documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
★ Playtime: http://cssgridgarden.com/ and http://flexboxfroggy.com/
★ Beauty: http://www.csszengarden.com/
★ All things CSS: https://css-tricks.com/
“Becoming someone who understands
CSS, rather than someone who just
uses CSS, will give you a huge
advantage in your work.
Rachel Andrew
THANK YOU!
ajara i. pfannenschmidt
web craftswoman
@ip_nagare
ip@nagare.eu

More Related Content

What's hot (20)

Core java concepts
Core java  conceptsCore java  concepts
Core java concepts
Ram132
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
Ana Cidre
 
JavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript HereJavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript Here
Laurence Svekis ✔
 
Intro to React
Intro to ReactIntro to React
Intro to React
Justin Reock
 
Collections - Maps
Collections - Maps Collections - Maps
Collections - Maps
Hitesh-Java
 
Core java
Core javaCore java
Core java
kasaragaddaslide
 
Presentation on "An Introduction to ReactJS"
Presentation on "An Introduction to ReactJS"Presentation on "An Introduction to ReactJS"
Presentation on "An Introduction to ReactJS"
Flipkart
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
Kanchha kaji Prajapati
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
Er. Kamal Bhusal
 
Angular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdfAngular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdf
JohnLeo57
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
Anand Kumar Rajana
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Oops concept on c#
Oops concept on c#Oops concept on c#
Oops concept on c#
baabtra.com - No. 1 supplier of quality freshers
 
Building Web Apps with WebAssembly and Blazor
Building Web Apps with WebAssembly and BlazorBuilding Web Apps with WebAssembly and Blazor
Building Web Apps with WebAssembly and Blazor
Amir Zuker
 
OOP with Java - Continued
OOP with Java - Continued OOP with Java - Continued
OOP with Java - Continued
Hitesh-Java
 
Spring boot Introduction
Spring boot IntroductionSpring boot Introduction
Spring boot Introduction
Jeevesh Pandey
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
Fu Cheng
 
Css
CssCss
Css
Vijay Raj Yanamala
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Dhruvin Shah
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Core java concepts
Core java  conceptsCore java  concepts
Core java concepts
Ram132
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
Ana Cidre
 
JavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript HereJavaScript Core fundamentals - Learn JavaScript Here
JavaScript Core fundamentals - Learn JavaScript Here
Laurence Svekis ✔
 
Collections - Maps
Collections - Maps Collections - Maps
Collections - Maps
Hitesh-Java
 
Presentation on "An Introduction to ReactJS"
Presentation on "An Introduction to ReactJS"Presentation on "An Introduction to ReactJS"
Presentation on "An Introduction to ReactJS"
Flipkart
 
Angular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdfAngular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdf
JohnLeo57
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Building Web Apps with WebAssembly and Blazor
Building Web Apps with WebAssembly and BlazorBuilding Web Apps with WebAssembly and Blazor
Building Web Apps with WebAssembly and Blazor
Amir Zuker
 
OOP with Java - Continued
OOP with Java - Continued OOP with Java - Continued
OOP with Java - Continued
Hitesh-Java
 
Spring boot Introduction
Spring boot IntroductionSpring boot Introduction
Spring boot Introduction
Jeevesh Pandey
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
Fu Cheng
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Dhruvin Shah
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 

Similar to CSS Grid Layout Introduction (20)

Css Grid Layout - A Short Introduction - Part 1
Css Grid Layout - A Short Introduction - Part 1Css Grid Layout - A Short Introduction - Part 1
Css Grid Layout - A Short Introduction - Part 1
Adam Michalowski
 
17523630.ppt
17523630.ppt17523630.ppt
17523630.ppt
ssusere2bc36
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
Rachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Rachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
Rachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
Rachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
Rachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
Igalia
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
Rachel Andrew
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
Jason Yingling
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
Igalia
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
The Grid - The Future of CSS Layout
The Grid - The Future of CSS LayoutThe Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
Ronny Siikaluoma
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Rachel Andrew
 
CSS Grid
CSS GridCSS Grid
CSS Grid
Digital Surgeons
 
Css Grid Layout - A Short Introduction - Part 1
Css Grid Layout - A Short Introduction - Part 1Css Grid Layout - A Short Introduction - Part 1
Css Grid Layout - A Short Introduction - Part 1
Adam Michalowski
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
Rachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Rachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
Rachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
Rachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
Igalia
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
Rachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)
Igalia
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
The Grid - The Future of CSS Layout
The Grid - The Future of CSS LayoutThe Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
Ronny Siikaluoma
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
 
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid LayoutDevoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Rachel Andrew
 

Recently uploaded (20)

Windows 11 Pro Crack Plus Full Download (Latest 2025)
Windows 11 Pro Crack Plus Full Download (Latest 2025)Windows 11 Pro Crack Plus Full Download (Latest 2025)
Windows 11 Pro Crack Plus Full Download (Latest 2025)
Ayesha khan
 
Service Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo MottierService Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo Mottier
sdnswitzerland
 
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Yantram Animation Studio Corporation
 
Security Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free DownloadSecurity Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free Download
Software
 
Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]
Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]
Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]
Yahoo
 
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Yahoo
 
Service Design in Zürich's city government
Service Design in Zürich's city governmentService Design in Zürich's city government
Service Design in Zürich's city government
sdnswitzerland
 
FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]
FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]
FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]
Google
 
PowerISO Crack 9.0 + Serial Key Free Download 2025
PowerISO Crack 9.0 + Serial Key Free Download 2025PowerISO Crack 9.0 + Serial Key Free Download 2025
PowerISO Crack 9.0 + Serial Key Free Download 2025
Mudasir
 
FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]
Mudasir
 
Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]
Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]
Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]
Developer
 
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Yahoo
 
Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024
MinahilMushtaq2
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
From Chaos to Clarity - A Framework to Maximize Design Impact.pdf
From Chaos to Clarity - A Framework to Maximize Design Impact.pdfFrom Chaos to Clarity - A Framework to Maximize Design Impact.pdf
From Chaos to Clarity - A Framework to Maximize Design Impact.pdf
matthewjdoty
 
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
Yahoo
 
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
Yahoo
 
Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Designer
 
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsjJjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
sanskrutee2008
 
OntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptxOntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptx
Jessica DuVerneay
 
Windows 11 Pro Crack Plus Full Download (Latest 2025)
Windows 11 Pro Crack Plus Full Download (Latest 2025)Windows 11 Pro Crack Plus Full Download (Latest 2025)
Windows 11 Pro Crack Plus Full Download (Latest 2025)
Ayesha khan
 
Service Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo MottierService Design and Tourism with Hugo Mottier
Service Design and Tourism with Hugo Mottier
sdnswitzerland
 
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Captivating 3D Interior Render of Elegant Residential Project in Jeddah City,...
Yantram Animation Studio Corporation
 
Security Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free DownloadSecurity Monitor Pro 6.22 Crack Free Download
Security Monitor Pro 6.22 Crack Free Download
Software
 
Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]
Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]
Apowersoft Video Converter Studio 4.8.4.25 with Crack [Latest]
Yahoo
 
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025
Yahoo
 
Service Design in Zürich's city government
Service Design in Zürich's city governmentService Design in Zürich's city government
Service Design in Zürich's city government
sdnswitzerland
 
FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]
FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]
FonePaw Data Recovery 2.6.0 Crack Full Version [Latest]
Google
 
PowerISO Crack 9.0 + Serial Key Free Download 2025
PowerISO Crack 9.0 + Serial Key Free Download 2025PowerISO Crack 9.0 + Serial Key Free Download 2025
PowerISO Crack 9.0 + Serial Key Free Download 2025
Mudasir
 
FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]FL Studio Producer Edition Crack + Full Version [Latest]
FL Studio Producer Edition Crack + Full Version [Latest]
Mudasir
 
Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]
Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]
Auslogics Disk Defrag Pro 10.0.0.1 Crack + Key Download [Latest]
Developer
 
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Yahoo
 
Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024Minahil Mushtaq's Creative Portfolio 2024
Minahil Mushtaq's Creative Portfolio 2024
MinahilMushtaq2
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
From Chaos to Clarity - A Framework to Maximize Design Impact.pdf
From Chaos to Clarity - A Framework to Maximize Design Impact.pdfFrom Chaos to Clarity - A Framework to Maximize Design Impact.pdf
From Chaos to Clarity - A Framework to Maximize Design Impact.pdf
matthewjdoty
 
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]
Yahoo
 
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
Yahoo
 
Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Unlock Tool 2025.06 Crack Latest Version Free Download 2025
Designer
 
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsjJjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
Jjjkalmsnsxjxixnndixndnskaooashbd udnsnjsj
sanskrutee2008
 
OntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptxOntologyDuVerneayBigDesign2025_May28.pptx
OntologyDuVerneayBigDesign2025_May28.pptx
Jessica DuVerneay
 

CSS Grid Layout Introduction

  • 2. A BRIEF HISTORY IN WEBPAGE LAYOUT First Webpage 1992
  • 3. A BRIEF HISTORY IN WEBPAGE LAYOUT Yahoo! Website 2002Yahoo! Website 1996
  • 4. A BRIEF HISTORY IN WEBPAGE LAYOUT Yahoo! Website 2017Yahoo! Website 2009
  • 5. CSS GRID LAYOUT DEFINITION A grid is an intersecting set of horizontal and vertical lines. One set defining rows and one set defining columns. Elements can be placed onto the grid, respecting these column and row lines.
  • 6. CSS GRID LAYOUT LEVEL 1 SPECIFICATION ★ Two-dimensional grid-based layout system. ★ Fixed track sizes (px) and/or flexible track sizes (%, fr). ★ Precise item placement through line numbers, names or areas. 
 Algorithm for non-defined items included. ★ Automated creation of additional tracks to hold content e.g. 
 add as many rows as will fit in container. ★ Alignment control of grid and grid elements. ★ Overlapping content control through z-index.
  • 7. CSS GRID LAYOUT SUPPORT Source: caniuse.com 2.08.2017
  • 8. CSS GRID LAYOUT TERMINOLOGY ★ Grid Container > Element to which display:grid; is applied. ★ Grid Item > Direct descendants of the grid container. ★ Grid Line > Dividing lines of the grid structure. Horizontal (row) and vertical (column) lines. ★ Grid Track > The space between two adjacent grid lines. ★ Grid Cell > Single unit. Space between 2 adjacent column and row grid lines. ★ Grid Area > Total space surrounded by 4 grid lines. Can consists of a numerous grid cells.
  • 9. CSS GRID LAYOUT TERMINOLOGY
  • 10. CSS GRID CONTAINER PROPERTIES ★ display: grid | inline-grid | subgrid ★ grid-template-columns: <track-size> ... | <line-name> <track- size> … ★ grid-template-rows <track-size> ... | <line-name> <track- size> … ★ grid-column-gap | grid-row-gap <line-size> ★ grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]] ★ justify-items | align-items: start | end | center | stretch ★ justify-content | align-content: start | end | center | stretch
  • 11. CSS GRID FUNCTIONS ★ MinMax()
 grid-auto-rows
 with a minimum height (px) but expanding with content (auto). ★ Auto-placement and order 
 grid-auto-flow: column | row | dense
 By default items are laid out by row. ★ Flexible filling of tracks 
 auto-fit | auto-fill
 Use in combination with minmax() to achieve flexible filling of tracks on grid in viewport. ★ and many more …
  • 12. CSS GRID ELEMENT PROPERTIES ★ grid-column-start, grid-column-end, 
 grid-row-start, grid-row-end: <number> | <name> | 
 span <number> | span <name> | auto ★ grid-column | grid-row: <start-line> / <end-line> ★ grid-area: <name> | <row-start> / <column-start> / <row- end> / <column-end> ★ justify-self: start | end | center | stretch ★ align-self: start | end | center | stretch
  • 13. CSS GRID LAYOUT RESOURCES ★ Great work by Rachel Andrew: https://gridbyexample.com/ ★ Rachel Andrew’s Website & Blog: https://rachelandrew.co.uk/ ★ Rachel Andrew’s Weekly Newsletter: http://csslayout.news/ ★ Jen Simmons Work on CSS: http://jensimmons.com/ ★ Jen Simmons Lab with Examples: http://labs.jensimmons.com/ ★ Mozilla Developer Network Documentation:
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout ★ Playtime: http://cssgridgarden.com/ and http://flexboxfroggy.com/ ★ Beauty: http://www.csszengarden.com/ ★ All things CSS: https://css-tricks.com/
  • 14. “Becoming someone who understands CSS, rather than someone who just uses CSS, will give you a huge advantage in your work. Rachel Andrew
  • 15. THANK YOU! ajara i. pfannenschmidt web craftswoman @ip_nagare ip@nagare.eu