PROGRAMMING

COMPTECH 224
Carlou Benedict S. Luchavez
Objectives
• CSS Grid • Responsive Web Design
• CSS Grid Columns, - Frameworks
Rows and Gaps
• CSS Grid Container
• CSS Grid Item
• Responsive Web Design
• The Viewport
• Building a Grid View
• Media Queries
CSS Grid Layout Module
CSS Grid Layout
• The Grid Layout Module
offers a grid-based
layout system, with
rows and columns.

• The Grid Layout Module makes it easier to

design a responsive layout structure, without
using float or positioning.
CSS Grid Layout Module
Note: Grid vs. Flexbox
The CSS Grid Layout should be used for two-
dimensional layout, with rows AND columns.
The CSS Flexbox Layout should be used for one-
dimensional layout, with rows OR columns.
CSS Grid Layout Module
CSS Grid Components
A grid always consists of:
• Grid Container - the parent (container) also
a <div> element
• Grid Items - the items inside the container
(child) also a <div> element
• All direct children of the grid container
automatically become grid items.
CSS Grid Layout Module
Example (Code):
CSS Grid Layout Module
Display Grid Property
The <div> element becomes a grid container when
its display property is set to grid or inline-
grid.
CSS Grid Layout Module
All CSS Grid Properties
CSS Grid Layout Module
All CSS Grid Properties
CSS Grid Layout Module
All CSS Grid Properties
CSS Grid Columns, Rows and
Gaps
Grid Columns
The vertical lines of grid items are called
columns.
CSS Grid Columns, Rows and
Gaps
Grid Rows
The horizontal lines of grid items are called
rows.
CSS Grid Columns, Rows and
Gaps
Grid Gaps
The spaces between each column/row are called
gaps.
CSS Grid Columns, Rows and
Gaps
Grid Gaps
The spaces between each column/row are called
gaps.
CSS Grid Columns, Rows and
Gaps
Grid Gaps
You can adjust the gap size by using one of the
following properties:
• column-gap
• row-gap
• gap
CSS Grid Columns, Rows and
Gaps
The column-gap Property
The column-gap property specifies the gap
between the columns in a grid.
CSS Grid Columns, Rows and
Gaps
The column-gap Property
CSS Grid Columns, Rows and
Gaps
The row-gap Property
CSS Grid Columns, Rows and
Gaps
The row-gap Property
CSS Grid Columns, Rows and
Gaps
The gap Property
The gap property is a shorthand property for
row-gap and column-gap:
CSS Grid Columns, Rows and
Gaps
The gap Property
CSS Grid Columns, Rows and
Gaps
The gap Property
CSS Grid Columns, Rows and
Gaps
The gap Property
CSS Grid Columns, Rows and
Gaps
Grid Lines
• The lines between
columns are called
column lines.
• The lines between
rows are called row
lines.
CSS Grid Columns, Rows and
Gaps
Grid Lines
We can specify where to start and end a grid item
by using the following properties:
• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
CSS Grid Columns, Rows and
Gaps
The grid-column-start and grid-
column-end Properties
The grid-column-start property specifies where
to start a grid item.
The grid-column-end property specifies where to
end a grid item.
CSS Grid Columns, Rows and
Gaps
The grid-column-start and grid-
column-end Properties
CSS Grid Columns, Rows and
Gaps
The grid-column-start and grid-
column-end Properties
CSS Grid Columns, Rows and
Gaps
The grid-column Property
The grid-column property is a shorthand
property for the grid-column-start and the
grid-column-end properties.
CSS Grid Columns, Rows and
Gaps
The grid-column Property
CSS Grid Columns, Rows and
Gaps
The grid-row-start and grid-row-
end Property
The grid-row-start property specifies where to
start a grid item.
The grid-row-end property specifies where to
end a grid item.
CSS Grid Columns, Rows and
Gaps
The grid-row-start and grid-row-
end Property
CSS Grid Columns, Rows and
Gaps
The grid-row-start and grid-row-
end Property
CSS Grid Columns, Rows and
Gaps
The grid-row Property
The grid-row property is a shorthand property
for the grid-row-start and the grid-row-end
properties.
CSS Grid Columns, Rows and
Gaps
The grid-row Property
The grid-row property is a shorthand property
for the grid-row-start and the grid-row-end
properties.
Responsive Web Design
What is Responsive Web Design?
• Responsive web design makes your web page
look good on all devices.
• Responsive web design uses only HTML and CSS.

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.
Responsive Web Design
Web pages should not leave out information to
fit smaller devices, but rather adapt its
content to fit any device:
Responsive Web Design –
The Viewport
What is 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.
Responsive Web Design –
The Viewport
Setting The Viewport
HTML5 introduced a method to let web designers
take control over the viewport, through the
<meta> tag.
You should include the following <meta>
viewport element in the <head> section of all
your web pages:
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
Responsive Web Design –
The Viewport
Setting The Viewport
This gives the browser instructions on how to
control the page's dimensions and scaling.
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.
Responsive Web Design –
The Viewport
Size Content to The Viewport
Users are used to scroll websites vertically on
both desktop and mobile devices - but not
horizontally!
So, if the user is forced to scroll
horizontally, or zoom out, to see the whole web
page it results in a poor user experience.
Responsive Web Design –
The Viewport
Some additional rules to follow:
1. Do NOT use large fixed - width elements - For
example, if an image has a width wider than the
viewport, it causes the viewport to scroll
horizontally. Remember to adjust this content to
fit within the width of the viewport.
2. Do NOT let the content rely on a particular width
to render well - Since screen dimensions and width
in CSS pixels vary widely between devices, content
should not rely on a particular viewport width to
render well.
Responsive Web Design –
The Viewport
Some additional rules to follow:
3. Use CSS media queries to apply different styling
for small and large screens - Setting large
absolute CSS widths for page elements will cause
the elements to be too wide for smaller devices.
Instead, consider using relative width values,
such as width: 100%. Also, be careful of using
large absolute positioning values. It may cause
the element to fall outside the viewport on
small devices.
Responsive Web Design –
The Viewport
Size Content to The Viewport
Users are used to scroll websites vertically on
both desktop and mobile devices - but not
horizontally!
So, if the user is forced to scroll
horizontally, or zoom out, to see the whole web
page it results in a poor user experience.
Responsive Web Design -
Building a Grid View
What is a Grid-View?
Many web pages are based on a grid-view, which
means that the page is divided into rows and
columns.
A responsive grid-view often has 6 or 12
columns, and will shrink and expand as you
resize the browser window.
Responsive Web Design -
Building a Grid View
Building a Grid View
First ensure that all HTML elements have the
box-sizing property set to border-box. This
makes sure that the padding and border are
included in the total width and height of the
elements.
Add the following at the beginning of your CSS:
Responsive Web Design -
Building a Grid View
We create a grid container with five grid items
(item1 = Header, item2 = Menu, item3 = Main
content, item4 = right, item5 = Footer):
Responsive Web Design -
Media Queries
What is a Media Query?
It uses the @media rule to include, display,
modify a block of CSS properties only if a
certain condition is true.
Responsive Web Design -
Media Queries
Add a Breakpoint
Earlier in this tutorial we made a web page
with rows and columns, and it was responsive,
but it did not look good on a small screen.
Media queries can help with that. We can add a
breakpoint where certain parts of the design
will behave differently on each side of the
breakpoint.
Responsive Web Design -
Media Queries
Add a Breakpoint
Responsive Web Design -
Media Queries
Add a Breakpoint
You can add as many breakpoints as you like.
We can also insert a breakpoint between tablets
and mobile phones.
Responsive Web Design -
Media Queries
Typical Device 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:
Responsive Web Design -
Media Queries
Responsive Web Design -
Frameworks
What is a framework?
It is a collection of tools and libraries that
help developers build and maintain websites and
web applications.
A great way to create a responsive design, is
to use a responsive style sheet, like W3.CSS,
Bootstrap, Laravel.
Responsive Web Design -
Frameworks
What is a framework?
You can utilize a framework in your webpage by
using the <link> tag.
This example includes the w3s framework
<link rel="stylesheet" href="https://
www.w3schools.com/w3css/4/w3.css">
THE END