0% found this document useful (0 votes)
58 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
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
58 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
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