CSS Flexbox and Grid Layouts

•

0 likes•96 views

Anantha kumar

Basics of CSS Flexbox and Grid

Software

flexbox &
grid
@ananth_akr
Bangalore HTML/CSS Meetup

Vertically and
Horizontally
center a div

Flexbox
• One Dimensional layout model
• Alters Width/Height of items based on
container size
• Truely flexible(change, resize, stretch,
shirnk)

Properties for Flex Container
• display:flex/inline-flex
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
https://codepen.io/AnanthAkr/pen/pozQRNq

Properties for Flex Items
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
https://codepen.io/AnanthAkr/pen/pozQRNq

Browser Support
https://caniuse.com/#feat=flexbox

Grid
• Two Dimensional layout model
• Can align page into columns and rows
• Very powerful layout system
• Can be used to create any type of layouts

Terminologies
• Grid Container
• Grid Item
• Grid Line
• Grid Track
• Grid Cell
• Grid Area

Properties for Grid Container
• display:grid/inner-grid
• grid-template-columns & grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap & grid-row-gap
• grid-gap
• justify-item, align-items & place-items
• justify-content, align-content & place-content
• grid-auto-columns & grid-auto-rows
• grid-auto-flow
• grid
https://codepen.io/AnanthAkr/pen/mdbaMEx
https://codepen.io/AnanthAkr/pen/pozQQPQ

Properties for Grid Item
• grid-column-start & grid-column-end
• grid-row-start & grid-row-end
• grid-column & grid-row
• grid-area
• justify-self, align-self & place-self
https://codepen.io/AnanthAkr/pen/gOYQEpm

Browser Support
https://caniuse.com/#feat=css-grid

Hasty Treats
fr unit
https://codepen.io/AnanthAkr/pen/eYOQyzZ

Hasty Treats
minmax()
https://codepen.io/AnanthAkr/pen/eYOQyzZ

Hasty Treats
display:contents
https://codepen.io/AnanthAkr/pen/eYOQyzZ

Thank you!
https://twitter.com/ananth_akr
https://github.com/Ananthakr
https://codepen.com/Ananthakr

References
• https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Flexible_Box_Layout
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/grid
• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://gridbyexample.com/

What's hot

Crafting a visually appealing website with iMISAndrea Robertson

Becoming a Software DeveloperXyples LLC

Shema.orgAmal Targhi

GrailsAditya Gaur

Comparisons of web languagesEvelyn Loh

Krishan gaurav-sapient bootstrapsessionKrishan Mohan

Word Press at Scale - WordCamp MinneapolisDrew Gorton

Persistence SmoothieFlip Sasser

What's hot (8)

Crafting a visually appealing website with iMIS

Becoming a Software Developer

Shema.org

Grails

Comparisons of web languages

Krishan gaurav-sapient bootstrapsession

Word Press at Scale - WordCamp Minneapolis

Persistence Smoothie

Similar to CSS Flexbox and Grid Layouts

Flexbox, Grid and SassSeble Nigussie

Intro to Flexbox - A Magical CSS PropertyAdam Soucie

MTA css layoutsDhairya Joshi

Introduction to flexboxJyoti Gautam

CSS Flexbox (flexible box layout)Woodridge Software

But what about old browsers?Rachel Andrew

The New CSS Layout - Dutch PHP ConferenceRachel Andrew

A complete guide to flexboxBytes Technolab Inc.

CSS3 Flex LayoutNeha Sharma

Intro to Flexbox with Real Word ExamplesJennifer Bland

Alfresco tech talk live on web quick startAlfresco Software

20160730 frog lt-css flexible boxes layoutGinpei Takanashi

#4 HTML & CSS [know-how]Dalibor Gogic

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn

Stupid Index Block Trickshannonhill

Basics of expression blend4Samson Tennela

Web technologies-course 04.pptxStefan Oprea

flexbox reportLearningTech

Designing Your Next Generation Web Pages with CSS3Gil Fink

HTML5: IntroductionGuillermo Paz

Similar to CSS Flexbox and Grid Layouts (20)

Flexbox, Grid and Sass

Intro to Flexbox - A Magical CSS Property

MTA css layouts

Introduction to flexbox

CSS Flexbox (flexible box layout)

But what about old browsers?

The New CSS Layout - Dutch PHP Conference

A complete guide to flexbox

CSS3 Flex Layout

Intro to Flexbox with Real Word Examples

Alfresco tech talk live on web quick start

20160730 frog lt-css flexible boxes layout

#4 HTML & CSS [know-how]

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox

Stupid Index Block Tricks

Basics of expression blend4

Web technologies-course 04.pptx

flexbox report

Designing Your Next Generation Web Pages with CSS3

HTML5: Introduction

Recently uploaded

Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy

Professional Resume Template for Software DevelopersVinodh Ram

CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE9953056974 Low Rate Call Girls In Saket, Delhi NCR

TECUNIQUE: Success Stories: IT Service providermohitmore19

(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700

The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171

Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq

Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions

5 Signs You Need a Fashion PLM Software.pdfWave PLM

How To Troubleshoot Collaboration Apps for the Modern Connected WorkerThousandEyes

Software Quality Assurance Interview QuestionsArshad QA

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...panagenda

Unlocking the Future of AI Agents with Large Language Modelsaagamshah0812

Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure

Clustering techniques data mining book ....ShaimaaMohamedGalal

Diamond Application Development Crafting Solutions with PrecisionSolGuruz

Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...MyIntelliSource, Inc.

Test Automation Strategy for Frontend and BackendArshad QA

DNT_Corporate presentation know about usDynamic Netsoft

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS

Recently uploaded (20)

Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications

Professional Resume Template for Software Developers

CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE

TECUNIQUE: Success Stories: IT Service provider

(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...

The Ultimate Test Automation Guide_ Best Practices and Tips.pdf

Salesforce Certified Field Service Consultant

Advancing Engineering with AI through the Next Generation of Strategic Projec...

5 Signs You Need a Fashion PLM Software.pdf

How To Troubleshoot Collaboration Apps for the Modern Connected Worker

Software Quality Assurance Interview Questions

W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...

Unlocking the Future of AI Agents with Large Language Models

Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...

Clustering techniques data mining book ....

Diamond Application Development Crafting Solutions with Precision

Steps To Getting Up And Running Quickly With MyTimeClock Employee Scheduling ...

Test Automation Strategy for Frontend and Backend

DNT_Corporate presentation know about us

The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...

CSS Flexbox and Grid Layouts

1. flexbox & grid @ananth_akr Bangalore HTML/CSS Meetup

2. Most Asked Question in CSS?

3. Vertically and Horizontally center a div

7. Flexbox to the rescue

8. Flexbox • One Dimensional layout model • Alters Width/Height of items based on container size • Truely flexible(change, resize, stretch, shirnk)

9. Flex layout

10. Properties for Flex Container • display:flex/inline-flex • flex-direction • flex-wrap • justify-content • align-items • align-content https://codepen.io/AnanthAkr/pen/pozQRNq

11. Properties for Flex Items • order • flex-grow • flex-shrink • flex-basis • flex • align-self https://codepen.io/AnanthAkr/pen/pozQRNq

12. Browser Support https://caniuse.com/#feat=flexbox

13. What about 2D?

14. Grid • Two Dimensional layout model • Can align page into columns and rows • Very powerful layout system • Can be used to create any type of layouts

15. Terminologies • Grid Container • Grid Item • Grid Line • Grid Track • Grid Cell • Grid Area

16. Grid Line Grid Track Grid AreaGrid Cell

17. Properties for Grid Container • display:grid/inner-grid • grid-template-columns & grid-template-rows • grid-template-areas • grid-template • grid-column-gap & grid-row-gap • grid-gap • justify-item, align-items & place-items • justify-content, align-content & place-content • grid-auto-columns & grid-auto-rows • grid-auto-flow • grid https://codepen.io/AnanthAkr/pen/mdbaMEx https://codepen.io/AnanthAkr/pen/pozQQPQ

18. Properties for Grid Item • grid-column-start & grid-column-end • grid-row-start & grid-row-end • grid-column & grid-row • grid-area • justify-self, align-self & place-self https://codepen.io/AnanthAkr/pen/gOYQEpm

19. Browser Support https://caniuse.com/#feat=css-grid

20. Hasty Treats fr unit https://codepen.io/AnanthAkr/pen/eYOQyzZ

21. Hasty Treats minmax() https://codepen.io/AnanthAkr/pen/eYOQyzZ

22. Hasty Treats display:contents https://codepen.io/AnanthAkr/pen/eYOQyzZ

23. Do we need CSS Frameworks?

24. Questions?

25. Thank you! https://twitter.com/ananth_akr https://github.com/Ananthakr https://codepen.com/Ananthakr

26. References • https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_Flexible_Box_Layout • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • https://developer.mozilla.org/en-US/docs/Web/CSS/grid • https://css-tricks.com/snippets/css/complete-guide-grid/ • https://gridbyexample.com/

27. fin.