Enviar pesquisa
Carregar
CSS Grid Layout - Razvan Rosu
•
0 gostou
•
276 visualizações
Razvan Rosu
Seguir
An overview and quick demo of the experimental CSS module: display grid layout
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 10
Baixar agora
Baixar para ler offline
Recomendados
Everything You know about CSS is Wrong
Everything You know about CSS is Wrong
chandleryu
Introduction to three.js & Leap Motion
Introduction to three.js & Leap Motion
Lee Trout
自分だけのデバイスを作るお話
自分だけのデバイスを作るお話
kishima7
Web optimizations Back to the basics - Razvan Rosu
Web optimizations Back to the basics - Razvan Rosu
Razvan Rosu
Atomic design - Razvan Rosu
Atomic design - Razvan Rosu
Razvan Rosu
Retail store layout,design and display
Retail store layout,design and display
Prithvi Ghag
CSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuro
Afonso Pacifer
World of CSS Grid
World of CSS Grid
Elad Shechter
Recomendados
Everything You know about CSS is Wrong
Everything You know about CSS is Wrong
chandleryu
Introduction to three.js & Leap Motion
Introduction to three.js & Leap Motion
Lee Trout
自分だけのデバイスを作るお話
自分だけのデバイスを作るお話
kishima7
Web optimizations Back to the basics - Razvan Rosu
Web optimizations Back to the basics - Razvan Rosu
Razvan Rosu
Atomic design - Razvan Rosu
Atomic design - Razvan Rosu
Razvan Rosu
Retail store layout,design and display
Retail store layout,design and display
Prithvi Ghag
CSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuro
Afonso Pacifer
World of CSS Grid
World of CSS Grid
Elad Shechter
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
Rachel Andrew
Laying out the future
Laying out the future
Rachel Andrew
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
CSS Grid for html5j
CSS Grid for html5j
Rachel Andrew
The Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
Ronny Siikaluoma
Render Conf: Start using CSS Grid Layout Today
Render Conf: 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 Freiburg
Rachel Andrew
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew
Laracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
Rachel Andrew
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Rachel Andrew
Would you like some Grids with that?
Would you like some Grids with that?
Kianosh Pourian
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Rachel Andrew
Flexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
Igalia
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Rachel Andrew
Confoo: The New CSS Layout
Confoo: The New CSS Layout
Rachel Andrew
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
Rachel Andrew
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart Orlando
Rachel Andrew
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Mais conteúdo relacionado
Semelhante a CSS Grid Layout - Razvan Rosu
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
Rachel Andrew
Laying out the future
Laying out the future
Rachel Andrew
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
CSS Grid for html5j
CSS Grid for html5j
Rachel Andrew
The Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
Ronny Siikaluoma
Render Conf: Start using CSS Grid Layout Today
Render Conf: 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 Freiburg
Rachel Andrew
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew
Laracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
Rachel Andrew
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Rachel Andrew
Would you like some Grids with that?
Would you like some Grids with that?
Kianosh Pourian
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Rachel Andrew
Flexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
Igalia
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Rachel Andrew
Confoo: The New CSS Layout
Confoo: The New CSS Layout
Rachel Andrew
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
Rachel Andrew
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart Orlando
Rachel Andrew
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
Semelhante a CSS Grid Layout - Razvan Rosu
(20)
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
Laying out the future
Laying out the future
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
CSS Grid for html5j
CSS Grid for html5j
The Grid - The Future of CSS Layout
The Grid - The Future of CSS Layout
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
Laracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Would you like some Grids with that?
Would you like some Grids with that?
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Flexbox and Grid Layout
Flexbox and Grid Layout
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
CSS Grid Layout. Specification overview. Implementation status and roadmap (B...
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Confoo: The New CSS Layout
Confoo: The New CSS Layout
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout - An Event Apart Orlando
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Último
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
Último
(20)
Slack Application Development 101 Slides
Slack Application Development 101 Slides
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
CSS Grid Layout - Razvan Rosu
1.
CSS Grid Layout
2.
What is CSS
grid: - a CSS module - introduces two-dimensional layout system
3.
Basic definition: .grid { display:
grid; /* enables the grid layout */ grid-template-columns: 100px auto 100px; /* 3 columns */ grid-template-rows: 25% 50px auto; /* 3 rows */ } .grid-item { grid-column: 2 / span 2; /* starts on the 2nd column, spans on 2 cols */ grid-row: 3; /* starts on the 3rd row, occupies 1 row (default value) */ }
4.
Example http://codepen.io/razvan-rosu/pen/zBBRXq?editors=1100
5.
Grid vs Flex
6.
<3 Flex was intended
for simpler one dimensional layouts. Grid isn’t replacing Flex, they work well together. Flex can be applied on the Grid’s children.
7.
Browser support (9/06/2016): PS:
IE 10/11 uses an older syntax
8.
really… ?
9.
How to try
it out Go to Chrome’s flags: Look for Experimental Web Platform features and enable them
10.
The End
Baixar agora