Web Programming
CSS Grid and Responsiveness
CSS Grid Layout
● The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.
● The grid properties are supported in all modern browsers.
CSS Grid Elements A grid layout consists of a parent element,
with one or more child elements. class="grid-item">5</div> <div
<div class="grid-container"> <div class="grid-item">6</div> <div
class="grid-item">1</div> <div class="grid-item">7</div> <div
class="grid-item">2</div> <div class="grid-item">8</div> <div
class="grid-item">3</div> <div class="grid-item">9</div> </div>
class="grid-item">4</div> <div
CSS Grid
● An HTML element becomes a grid container when its display property is set to
grid or inline-grid.
● All direct children of the grid container automatically become grid items. ●
The vertical lines of grid items are called columns.
● The horizontal lines of grid items are called rows.
● The spaces between each column/row are called gaps.
● The lines between columns are called column lines.
● The lines between rows are called row lines.
CSS Grid
CSS Grid
You can adjust the gap size by using one of the following properties:
column-gap
row-gap
gap
Example:
.grid-container {
display: grid;
column-gap: 50px;
row-gap: 50px;
}
CSS Grid
● Grid lines are used when placing a grid item in a grid container. ●
It refers to the line numbers when placing items.
Example:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
This place a grid item at column line 1, and let it end on column line 3.
CSS Grid Container
● Grid containers consist of grid items, placed inside columns and rows. ● 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.
CSS Grid Container
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
This creates a grid layout containing 4 columns. The width of the 4 columns are set to
"auto", meaning all columns should have the same width.
The grid-template-columns property can also be used to specify the size (width) of
the columns.
Example: grid-template-columns: 80px 200px auto 40px;
CSS Grid Container
● The grid-template-rows property is similar to grid-template-columns and it
defines the height of each row.
● The value is a space-separated-list, where each value defines the height of the
respective row.
Example:
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
CSS Grid Container
● The justify-content property is used to align the whole grid inside the container. ●
The grid's total width has to be less than the container's width for the
justify-content property to have any effect.
● The align-content property is used to vertically align the whole grid inside the
container.
● The grid's total height has to be less than the container's height for the
align-content property to have any effect.
CSS Grid Item
● A grid container contains grid items. It is a child element to a container. ● By
default, a container has one grid item for each column, in each row, but you can
style the grid items so that they will span multiple columns and/or rows. ● The
grid-column property defines on which column(s) to place an item. You define
where the item will start, and where the item will end.
● To place an item, you can refer to line numbers, or use the keyword "span" to
define how many columns the item will span.
CSS Grid Item
Example:
.grid-container {
text-align: center;
padding: 20px 0;
}
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-column: 3 / 6;
}
CSS Grid Item
● The grid-row property defines on
which row to place an item.
● To place an item, you can refer to line
numbers, or use the keyword
"span" to define how many rows the
item will span.
Example:
.item1 {
grid-row: 1 / 4;
}
Responsive Web Design
● Responsive web design makes your web page look good on all devices. ●
Responsive web design is not a program or a JavaScript.
Web pages can be viewed using many different devices: desktops, tablets, and
phones. Your web page should look good, and be easy to use, regardless of the device.
Web pages should not leave out information to fit smaller devices, but rather adapt
its content to fit any device.
It is called responsive web design when you use CSS and HTML to resize, hide, shrink,
enlarge, or move the content to make it look good on any screen.
The Viewport
● The viewport is the user's visible area of a web page.
● The viewport varies with the device, and will be smaller on a mobile phone than
on a computer screen.
● HTML5 introduced a method to let web designers take control over the
viewport, through the <meta> tag.
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
○ The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device). ○ The
initial-scale=1.0 part sets the initial zoom level when the page is first loaded
by the browser.
Media Queries
● Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a
block of CSS properties only if a certain condition is true.
● Media queries can help to add a breakpoint where certain parts of the design will
behave differently on each side of the breakpoint.
Example:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
This means that if the browser window is 600px or smaller, the background color will be
lightblue.
Adding Breakpoints
Through media queries, you can add as many breakpoints as you like.
Example:
@media only screen and (min-width: 600px) {
….
}
@media only screen and (min-width: 768px) {
….
}
Adding Breakpoints
There are tons of screens and devices with different heights and widths, so it is hard to create an
exact breakpoint for each device. To keep things simple you could target five groups:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientation: Portrait / Landscape
Media queries can also be used to change layout of a page depending on the orientation of
the browser.
You can have a set of CSS properties that will only apply when the browser window is wider
than its height, a so called "Landscape" orientation.
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Hide Elements With Media Queries Using media
queries, we can hide elements depending on the screen sizes.
Example:
@media only screen and (max-width: 600px) {
[Link] {
display: none;
}
}
This means that if the screen size is 600px wide or less, hide the element.
Thank You.