Program Studi Teknik Informatika
Fakultas Teknik – Universitas Surabaya
RWD – CSS Grid
Week 13
1604C051 – Full-stack Programming
Jimmy
Source: https://www.w3schools.com/css/css_grid.asp
Introduction to Grid
01
Grid Layout
• The CSS Grid Layout Module offers a grid-based layout system, with rows and columns.
• It allows designing a web page layout without having to use floats and positioning.
Grid Layout Sample
• Note that “grid-container” is simply a class name (feel free to change it as needed).
• Related CSS scripts will be discussed in the following slides
Display: grid vs. inline-grid
Display: grid means the grid container will consumes the whole screen (viewport) width.
Display: inline-grid means the grid container will consumes a portion of the screen
depending on its content and also other items’
content
Grid Items
• All direct children of the grid container are automatically become grid items.
Grid Rows and Columns
Grid Gaps
The gap sizes are adjustable using one of the following properties:
• grid-column-gap
• grid-row-gap
• grid-gap
Grid Gaps Example
Grid Container
02
Grid Container
• To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid.
• Grid containers consist of grid items, placed inside columns and rows.
Create a simple HTML
Common.css
grid-container: grid-template-columns
• The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.
• The value is a space-separated-list, where each value defines the width of the respective column.
• If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.
Custom column sizes
• We could also specify exact size for each column.
Common.css
grid-container: grid-template-rows
• The grid-template-rows property defines the height of each row.
• If there are more rows than specified, then HTML will reiterate starting from the first specified height.
Grid Content Horizontal Spacing
• If we specify grid column width with total width less than the
container width, then we need to specify how to justify the content.
• Justify content options:
– Space – evenly:
– Space – around – Space – between – Center
– Start – End
Justify Content: Space evenly
• give the columns equal amount of space between, and around them.
Justify Content: Space around
• give the columns equal amount of space around them.
Justify Content: Space between
• give the columns the maximum equal amount of space between them.
Justify Content: Center
• align the grid in the middle of the container
Justify Content: Start
• align the grid at the beginning of the container
Justify Content: End
• align the grid at the end of the container
Grid Content Vertical Alignment
• The align-content property is used to vertically align the whole grid inside the container.
• Options:
– Center
– Space-evenly – Space-around – Space-between – Start
– End
Algin Content: Center
• align the grid in the middle of the container
Align Content: Try other alignments
Grid Item
03
Grid Lines
Multiple Columns Grid
Multiple Columns Grid: Grid-Column
Grid-column: 1 / 5 means the grid will start at column 1 and end at column 5
Column Span
Item2 starts at column line 2 and span for 3 columns
Multiple Rows Grid
Multiple Rows Grid: grid-row
Item1 starts on row line 1 and ends on row line 4
Exercise
1
2 3
4 5 6 7
8
9
10 11 12
Grid-Area
• Grid-Area can be used as a shortcut to specify grid-row-start, grid- column-start, grid-row-end and the grid-column-end properties.
Grid-area: Naming Grid Items
• The grid-area property can also be used to assign a name to a grid item.
Using Named Grid Items
• Each row is defined using single quotes (' ')
• The columns inside each row is defined within the quotes, separated by a space.
• The example specifies one row with five columns (all columns are named as myArea).
• Item1 occupies all area named as myArea. Since all five columns in the specified row are named as myArea, item1 occupies all five columns.
Other Named Area Examples
Unnamed Area
• Period / dot (.) specifies area with no name.
Defining multiple Rows
• To define two or more rows, define the columns of the subsequent row inside subsequent set of apostrophes.
Sample of a Web Template
Grid Area: Order of the Items
• Using grid area, we can position an item as needed, independent from the order of the HTML code.
• E.g., the first item in the HTML code not necessarily appear as the first item in the grid.
Grid & Media Queries
04
Grid Layout based on Screen Size
Wide Screen (> 500px)
Small Screen (<= 500px)
Exercise
Create the following grid layout
Wide Screen (> 500px) Wide Screen (<= 500px)