Scribd
Upload
136 views

CSS Flex Grid Lec2

CSS Flexbox and Grid Layout are two dimensional layout systems for building page layouts. [1] Flexbox is for one-dimensional layouts in rows or columns. It uses flex-direction, flex-wrap, flex-flow and other properties. [2] Grid Layout is for two-dimensional layouts with rows and columns. It uses display: grid, grid-template-columns, row-gap and other properties to define the grid structure. [3] Both systems provide flexible and responsive page layout capabilities for building user interfaces.

Uploaded by

Pranjal tiwari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
136 views

CSS Flex Grid Lec2

CSS Flexbox and Grid Layout are two dimensional layout systems for building page layouts. [1] Flexbox is for one-dimensional layouts in rows or columns. It uses flex-direction, flex-wrap, flex-flow and other properties. [2] Grid Layout is for two-dimensional layouts with rows and columns. It uses display: grid, grid-template-columns, row-gap and other properties to define the grid structure. [3] Both systems provide flexible and responsive page layout capabilities for building user interfaces.

Uploaded by

Pranjal tiwari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 25

CSS Flexbox & Grid Layout

Anshika Agarwal 06-08-2023


Introduction to CSS Layout

• Normal flow
• Can change normal flow by updating following methods :
• Display
• Float
• Position
• Table
• Multi-column layout
Flexible Box Layout

• One dimensional layout method for arranging items in rows or columns


• display: flex - set on parent element , children becomes flex items
Flex Model
flex-direction

• Row (default)
• Column
• Row-reverse
• Column-reverse
Other flex properties

• flex - Specifies the components of a flexible length


• flex-wrap
• flex-flow
Flex-grow
Horizontal & Vertical Alignment

• align-items controls where the flex items sits on the cross axis
• Default value : stretch
• flex-start
• flex-end
• Center
• align-self - overrides align-items behaviour for individual flex items
Horizontal & Vertical Alignment

• justify-content controls where the flex items sits on the main axis
• Default value : flex-start
• flex-end
• center
• space-between
• space-around
Ordering flex items

• With flexbox, layout of flex items can be changed without affecting the source order.
• By default, all flex-items have order value of 0.
• Negative order values make flex items appear earlier than items whose value is 0.
CSS Grid Layout

• Two dimensional layout system for the web


• display:grid - set on parent element and children becomes grid elements
• By default, one column grid gets created
• Can add columns using grid-template-columns
Gaps between tracks

• column-gap
• row-gap
• gap
Flexible grids with the fr unit

• The fr unit represents one fraction of the available space in the grid container to
flexibly size grid rows and columns

• grid-template-columns : 1fr 1fr 1fr


Repeating track listings

• Can repeat track or section of track using the CSS repeat( ) function
• grid-template-columns: repeat(3, 1fr)
The implicit and explicit grid

• Explicit grid - Created using grid-template-columns or grid-template-rows


• Implicit grid - Extends the defined explicit grid when content is placed outside of that
grid, such as into our rows by drawing additional grid lines

• grid-auto-rows and grid-auto-columns properties are used to give implicit grid tracks a
size
The minmax() function

• The minmax() function lets us set a minimum and maximum size for a track
• minmax(100px, auto)
As many columns as will fit

• We can create as many columns as will fit into the container by setting value of grid-
template-columns using repeat( ) function and passing keyword
auto-fill
Line-based placement

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
Add css such that
page looks like this
Positioning with
grid-template-areas
Thank You !!

You might also like