CSS Layout

(grid and flex)

Flexbox
⚫ The flexible box model is a one dimensional layout
model that provides a method to offer special
distribution and powerful alignment capabilities
⚫ Responsive and mobile friendly
⚫ Orders of elements can be changed easily
⚫ Flexbox model works by using container and item
properties
⚫ Flex container is an element that contains flex items
⚫ Flex items are direct children of flex containers
Flexbox properties
⚫ The Flexbox module includes properties for parent
elements, (flex containers), and child elements (flex
items)
⚫ The flex container properties include:
⚫ flex-direction, flex-wrap, flex-flow, justify-content,
align-items, align-content
⚫ The flex items properties include:
⚫ order, flex-grow, flex-shrink, flex-basis, flex,
align-self
Flex container
⚫ The first step to start using Flexbox is to create a flex
container.
⚫ This is done by setting the display property to flex on the
parent element.
⚫ As a result, it becomes a flex container with its direct
children (be they divs, list items, paragraphs, etc.)
automatically becoming flex items.
HTML CODE CSS CODE
⚫<div
For example:
class="container"> .container
<div>1</div> {
<div>2</div> display: flex;
<div>3</div>
}
</div>
Flex-direction (flex container property)
⚫ This establishes the main-axis, thus defining the
direction flex items are placed in the flex container.
⚫ Flexbox is a single-direction layout concept. I.e., flex
items are primarily laid out either in horizontal rows or
vertical columns.
⚫ flex-direction
⚫ Values: row | column | row-reverse | column-reverse
⚫ Default: row
⚫ Applies to: flex containers
⚫ Inherits: no
Axes in flexbox layout model
⚫ .
Axes in flexbox layout model
⚫ The property values within the flexbox system do not
reference "left," "right," "top," or "bottom." Instead, the
main axis and the cross axis are used.
⚫ The main axis is the flex direction specified for the flex
container.
⚫ When set to row, the main axis is horizontal;
⚫ when set to column, the main axis is vertical.
⚫ The cross axis is perpendicular to the main axis
(vertical for row, horizontal for column).
Flex-wrap (flex container property)
⚫ By default, flex items will all try to fit onto one line.
⚫ We can change that and allow them to break onto
additional lines as needed using flex-wrap property.
⚫ The ‘wrap’ keyword turns on the ability to wrap onto
multiple lines
⚫ flex-wrap
⚫ Values: nowrap | wrap | wrap-reverse
⚫ Default: nowrap
⚫ Applies to: flex containers
⚫ Inherits: no
Flex-flow (flex container property)
⚫ This is a shorthand for the flex-direction and flex-wrap
properties, which together define the flex container’s
main and cross axes.
⚫ flex-flow
⚫ Values: flex-direction flex-wrap
⚫ Default: row nowrap
⚫ Applies to: flex containers
⚫ Inherits: no
Alignment of Flex Items in the Container
⚫ The following container properties affect the alignment
of items along the main axis and cross axis.
⚫ Container properties for aligning on the main axis
⚫ justify-content
⚫ Container properties for aligning on the cross axis
⚫ align-items
⚫ align-content
justify-content (flex container property)
⚫ By default, flex items are only as wide as they need to be,
i.e., the flex-container may have space to spare on the flex
line.
⚫ Also by default, the items flow in right next to each other from
the starting position of the main axis
⚫ This property defines how extra space should be distributed
around or between items that have reached their maximum
size
⚫ Values: flex-start | flex-end | center | space-between |
space-around
⚫ Default: flex-start
⚫ Applies to: flex containers
⚫ Inherits: no
justify-content
align-items (flex container property)
⚫ This defines the default behavior for how flex items are laid
out along the cross axis on the current line.
⚫ It’s like the justify-content version for the cross-axis.
⚫ align-items
⚫ Values: flex-start | flex-end | center | baseline | stretch
⚫ Default: stretch
⚫ Applies to: flex containers
⚫ Inherits: no
align-items
align-self
⚫ This allows the default alignment (or the one specified
by align-items) to be overridden for individual flex
items.
⚫ align-self
⚫ Values: flex-start | flex-end | center | baseline | stretch
⚫ Default: stretch
⚫ Applies to: flex items
⚫ Inherits: no
align-content (flex container property)
⚫ align-content, affects how multiple flex lines are spread
out across the cross axis.
⚫ align-content applies only when there are multiple
wrapped flex lines.
⚫ If the flex items are on a single line, it does nothing.
⚫ align-content
⚫ Values: flex-start | flex-end | center | space-around |
space-between | stretch
⚫ Default: stretch
⚫ Applies to: multi-line flex containers
⚫ Inherits: no
flex-grow (flex item property)
⚫ This defines the ability for a flex item to grow if necessary.
⚫ It accepts a unitless value that serves as a proportion.
⚫ It dictates what amount of the available space inside the flex
container the item should take up.
⚫ If flex-grow value for all flex items is set to 1, the browser takes
whatever extra space is available along the main axis and applies it
equally to each item, allowing them all to stretch the same amount.
⚫ Values: number
⚫ Default: 0
⚫ Applies to: flex items
⚫ Inherits: no
flex-shrink (flex item property)
⚫ This defines the ability for a flex item to shrink if necessary.
Such as when the container is not wide enough to contain
the items.
⚫ This property takes away some space from within the items,
shrinking them to fit, according to a specified ratio.
⚫ flex-shrink
⚫ Values: number
⚫ Default: 1
⚫ Applies to: flex items
⚫ Inherits: no
flex-basis (flex item property)
⚫ This property defines the starting size of the item
before any wrapping, growing, or shrinking occurs.
⚫ It may be used instead of the width property (or height
property for columns) for flex items.
⚫ flex-basis
⚫ Values: length | percentage | auto
⚫ Default: auto
⚫ Applies to: flex items
⚫ Inherits: no
Flex
⚫ Flex is controlled with the flex property, which specifies
how much an item can grow and shrink, and identifies its
starting size.
⚫ flex is a shorthand property for flex-grow, flex-shrink, and
flex-basis. Typically listed in this order:
⚫ flex: flex-grow flex-shrink flex-basis;
⚫ Eg., flex: 1 0 200px;
⚫ flex
⚫ Values: none | 'flex-grow flex-shrink flex-basis'
⚫ Default: 0 1 auto
⚫ Applies to: flex items
⚫ Inherits: no
List of all flex container and Item properties
 Icebreaker questions
1. ___________ provides file location of an image to use as background
2. ___________ specifies underlines, over lines and line-through
3. ___________ specifies the location of the origin background image
4. ___________ specifies whether and how a background image repeats
5. ___________ changes the capitalization of text
6. ___________ specifies transparency level of elements.
7. ___________ specifies a typeface of a text
8. ___________ specifies the level of boldness of a font

22
 Icebreaker questions
1. ___background-image____ provides location of an image to use as
background
2. ____text-decoration_______ specifies underlines, over lines and
line-through
3. _background-position___ specifies the location of the origin
background image
4. __background-repeat__ specifies whether and how a background image
repeats
5. ____text-transform_______ changes the capitalization of text
6. ____Opacity_______ specifies transparency level of elements.
7. ____font-family_______ specifies a typeface of a text
8. ____font-weight_______ specifies the level of boldness of a font

23
⚫ You have a flex container with flex-direction:
row, justify-content: center, and three items
inside it. One of the items has flex-grow: 1, while
the others have flex-grow: 0. What will be the
layout of the items, and why?
a) The items will be centered, and the one with flex-grow: 1
will expand to fill the remaining space
b) All items will be equally spaced, with the center item
larger than the others
c) All items will have the same width because
justify-content overrides flex-grow.
d) The items will align to the left since only one item has
flex-grow.
⚫ If you have a flex container with flex-direction: column,
align-items: center, and three flex items, how will the
items be positioned?
a) The items will be centered vertically and horizontally
within the container
b) The items will be aligned to the center horizontally but
stacked from top to bottom
c) The items will be stacked horizontally with space between
each item
d) The items will stretch across the container vertically
⚫ In a flex container with align-items: flex-start and
flex-direction: column, what effect will setting align-self:
center on one item have?

a) The item will align itself to the top of the container

b) The item will remain at the start of the container
c) The item will align to the center horizontally, while
other items stay at the top
d) The item will align to the bottom of the container
 Grid Layout Model
⚫ Creating a full-page layout with Flexbox is feasible;
however, the task is more appropriately managed with Grid
Layout,
⚫ Flexbox is better suited for individual components on a page
⚫ such as navigation, series of product “cards,” or items
intended for alignment in a line
⚫ CSS Grid Layout Module offers a system for arranging
elements in rows and columns.
⚫ Note, Flexbox only organizes elements along a single axis.

27
 Important CSS Grid terminology
1. Grid Container: the element on which display: grid is
applied. It’s the direct parent of all the grid items.
2. Grid Item: the children (i.e. direct descendants) of the
grid container.
3. Grid Line: the horizontal and vertical dividing lines of
the grid
4. Grid Cell: it’s a single “unit” of the grid
5. Grid Track: the space between two adjacent grid lines.
which is a generic name for a grid column and a grid row.
6. Grid Area: it’s a rectangular area made up of one or more
adjacent grid cells

28
 The parts of a CSS grid

29
 Takeaway question
⚫ Can you differentiate between key components in CSS Grid
such as
⚫ the Grid Container,
⚫ Grid Item,
⚫ Grid Line,
⚫ Grid Cell,
⚫ Grid Track, and
⚫ Grid Area

30
 CSS grid layout has the following features:
⚫ Fixed and/or flexible track sizes
⚫ Ability to position items precisely using line numbers,
names, or by targeting a grid area
⚫ Flexibility to add rows and columns as needed
⚫ Control over item alignment within a grid area and the
overall alignment of the entire grid

31
 Grid Container
⚫ The first step to start using Grid is to create a grid
container.
⚫ This is done by specifying a container element as a
grid through "display: grid"
⚫ Followed by specifying ,
⚫ how many rows and columns we want and
⚫ how wide they should be
⚫ Subsequently, positioning the child elements within the
grid

32
 Defining Grid track
⚫ grid-template-columns and grid-template-rows define
the columns and rows of a grid with a space-separated
list of values.
⚫ The list values represent the track size and the number
of values determines the number of rows or columns.
⚫ grid-template-rows, grid-template-columns
⚫ Values: none | list of track sizes and optional line names
⚫ Default: none
⚫ Applies to: grid containers
⚫ Inherits: no

33
 Example
⚫ #layout {
⚫ display: grid;
⚫ grid-template-rows: 100px 400px 100px;
⚫ grid-template-columns: 200px 500px 200px;
⚫}

34
 Takeaway question
1. What is the initial step to take to use CSS Grid?
2. How do grid-template-columns and
grid-template-rows in CSS help define a grid layout?
3. How do we determine the number of rows and
columns in the grid?
4. Write a CSS code snippet for a grid container with
three columns, each equal to 50 pixel, and two rows
where the first row is 100 pixels tall, and the second
row is twice the height of the first row.

35
 Sizing Grid tracks
⚫ In CSS Grid Layout, grid tracks refer to the rows and
columns that make up the grid.
⚫ It’s possible to specify the size of these tracks using
various units and values using,
⚫ Flexible Sizes with Fractional Units
⚫ Minmax Function
⚫ Repeating track sizes

36
 Fractional units (fr)
⚫ The Grid specific fractional unit (fr) allows us to create
track widths that expand and contract depending on
available space.
⚫ The fr unit represents a fraction of the available space.
⚫ Example,
⚫ .container {
⚫ display: grid;
⚫ grid-template-rows: 1fr 2fr;
⚫ grid-template-columns: 1fr 2fr; }
⚫ Both rows and columns are set to take up one part and
two parts of the available space, respectively.
37
 Takeaway questions
1. What do grid tracks refer to? and list the different
methods to specify their sizes
2. Create a CSS Grid with three columns, where the first
column is twice as wide as the other two.
3. Create a CSS Grid layout with four columns. Set the first
and last columns to be three times wider than the middle
two columns.
4. Create a CSS Grid with five columns, where the first and
last columns are half the width of the middle three
columns.

38
 Minimum and maximum size range
⚫ It is possible to restrict the size range of a track by setting its
minimum and maximum widths
⚫ The minmax function allows us to specify a size range for
grid tracks.
⚫ The function takes two arguments: minimum and maximum
size
⚫ Example,
⚫ grid-template-columns: 200px minmax(15em, 45em) 200px;
⚫ This rule sets the middle column to a width that is at least
15em but never wider than 45em.
⚫ N.B., fr units are not permitted as the minimum value in a
minmax() function
39
 Repeating track sizes
⚫ In CSS Grid Layout, the repeat function is used when
creating a grid with consistent layout without having to
list each size individually. Like this,
⚫ grid-template-columns: 20px 1fr 20px 1fr 20px 1fr 20px
1fr 20px 1fr;
⚫ The pattern “20px 1fr” repeats five times, but it can be
written using the repeat function,
⚫ grid-template-columns: repeat(5, 20px 1fr);
⚫ It takes two arguments: the number of repetitions and
the size of each repetition

40
 Takeaway question
⚫ What are the two arguments of the repeat function?
⚫ Create a CSS Grid layout where the pattern "30px 2fr"
repeats three times. (how many columns will it have?)
⚫ Create a CSS Grid layout Implement a repeating pattern
where the first two columns have a fixed width of 40 pixels,
followed by three columns with a flexible width of 1fr, and
then repeat this pattern twice.

41
 Grid lines and names
⚫ When the browser creates a grid, it also automatically
assigns each grid line a number that can be referenced when
positioning items.
⚫ The grid line at the start of the grid track is 1, and lines are
numbered sequentially from there.
⚫ The lines are numbered from the end of tracks as well,
starting with –1, and numbers count back from there

42
 Grid line cont’d
⚫ Grid names are user-defined names for lines in the grid.
⚫ Grid names are incorporated within square brackets,
indicating their position relative to the tracks.
⚫ Example,
⚫ #layout {
⚫ display: grid;
⚫ grid-template-rows: [header] 100px [content] 400px [footer]
90px;
⚫ grid-template-columns: [ads] 200px [main] 500px [links]
200px;
⚫ }

43
 Takeaway questions
1. How does the browser assign numbers to grid lines, and
how does it start?
2. Can you explain how grid lines are numbered from the
end of the grid tracks and how does it start?
3. What are grid names, and how are they introduced within
the grid?
4. Write a CSS code snippet for a grid container with 2
columns, each equal to 50 pixel, and two rows each equal
to 40 pixels.
⚫ The grid should have explicit column and row names such as
"left," "center," and "right" for columns, and "top" and
"bottom" for rows.
44
 Positioning grid items
⚫ A grid item’s location can be determined by
referring to specific grid lines using the following
CSS grid properties,
⚫ grid-column-start, grid-column-end, grid-row-start,
grid-row-end
⚫ Values: line | name | span <number> | span <name> | auto;
⚫ Default: none
⚫ Applies to: grid items

45
 Example,
⚫ .container { ⚫ .box2 {
display: grid; column-start: 1;
grid-template-columns: row-start: 3;
repeat(3, 1fr); row-end: 5;}
grid-auto-rows: 100px;}

⚫ .box1 {
column-start: 1;
column-end: 4;
row-start: 1;
row-end: 3; }

46
 Takeaway question
⚫ Create a CSS Grid layout with three columns and two
rows.
⚫ Place a grid item in the center column and second row
using the necessary properties.
⚫ Ensure the item spans two columns and one row.

47
 Gutters
⚫ Gutters (or alleys) between grid cells can be created
using the column-gap and row-gap properties.
⚫ They are properties which specify the size of the grid
lines.
⚫ Example,
⚫ .container {
⚫ grid-template-columns: 100px 50px 100px;
⚫ grid-template-rows: 80px auto 80px;
⚫ column-gap: 10px;
⚫ row-gap: 15px;
⚫}
48
 Takeaway question
⚫ Create a CSS Grid layout with 10 columns each equal
to 20px and three rows each 40px.
⚫ Set the gutters 15 pixels wide for columns and 10
pixels high for rows.

49
 Defining grid areas (reading assignment)
⚫ In CSS Grid Layout, grid areas allow us to define named
areas within the grid and place items into the area by
referencing the names.
⚫ To define grid areas, we use the grid-template-areas
property within the grid container
⚫ grid-template-areas
⚫ Values: none | series of area names
⚫ Default: none
⚫ Applies to: grid containers
⚫ Inherits: no

50
 Example,
⚫ The .container creates a grid with three rows and two
columns.
⚫ The grid-template-areas property defines named areas for
each cell in the grid.
⚫ .container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 100px 1fr 50px;
grid-template-columns: 200px 1fr; }
51
 CSS Grid Properties
⚫ Parent container
● Display: grid
● Grid-template-rows
● Grid-template-columns
● Grid-row-gap
● Grid-column-gap
● Grid-auto-rows
● Justify-items: start | end | center | stretch
● Align-items: start | end | center | stretch
● Justify-content: start | end | center | space-between |
space-around
● Align-content

52
 Cont.…..
⚫ Child properties
⚫ grid-column-start
⚫ grid-column-end
⚫ grid-row-start
⚫ grid-row-end
⚫ grid-column
⚫ grid-row
⚫ grid-area
⚫ justify-self
⚫ align-self
⚫ place-self

53
 Additional resource
⚫ online games for learning Flexbox and grid
⚫ https://flexboxfroggy.com/
⚫ https://cssgridgarden.com/

54
 End of chapter four

55