CSS Flex Grid Lec2
CSS Flex Grid Lec2
• Normal flow
• Can change normal flow by updating following methods :
• Display
• Float
• Position
• Table
• Multi-column layout
Flexible Box Layout
• Row (default)
• Column
• Row-reverse
• Column-reverse
Other flex properties
• 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
• 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
• Can repeat track or section of track using the CSS repeat( ) function
• grid-template-columns: repeat(3, 1fr)
The implicit and explicit grid
• 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 !!