A GUIDE TO A RESPONSIVE WEBSITE
The flexible box layout module (usually referred to as flexbox) is a one-dimensional layout model
for distributing space between items and includes numerous alignment capabilities. Flexbox as
being one-dimensional we are describing the fact that flexbox deals with layout in one dimension
at a time — either as a row or as a column. This can be contrasted with the two-dimensional model
of CSS Grid Layout, which controls columns and rows together.
The CSS Flexbox offers one-dimensional layout. It is helpful in allocating and aligning the space
among items in a container (made of grids). It works with all kinds of display devices and screen
sizes.
Property Values
Property Description
flex-grow Specifies how much an item will grow relative to other items in the container.
flex- Determines how much an item will shrink relative to the rest of the flexible items
shrink when space is limited.
Sets the initial size of a flex item. It can be auto, inherit, or a length value
flex-basis
like 50%.
Controls whether flex items stay on a single line or can wrap onto multiple lines
flex-wrap
within the container.
1. Flex-Grow
flex-grow specifies how much a flex item will grow relative to other items in the container when
extra space is available. The value can be any positive number, with higher values allowing items
to grow more.
Example:
.item1 {
flex-grow: 2;
}
.item2 {
flex-grow: 1;
}
2. Flex-Shrink
flex-shrink controls how much an item will shrink relative to other items when there is not enough
space in the container. The value can be any positive number, with higher values indicating more
shrinkage.
Example:
.item1 {
flex-shrink: 3;
}
.item2 {
flex-shrink: 1;
}
In this example, .item1 will shrink more than .item2 when space is limited.
3. Flex-Basis
flex-basis sets the initial size of a flex item before any space distribution occurs. It can be a length
value (e.g., 100px), percentage (e.g., 50%), or keyword (auto or inherit).
Example:
.item1 {
flex-basis: 200px;
}
.item2 {
flex-basis: 30%;
}
CSS grid layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out
major page areas or small user interface elements. A grid is a set of intersecting horizontal and
vertical lines defining columns and rows. Elements can be placed onto the grid within these column
and row lines.
Property values:
Value Description
It is default value no specific size mentioned for row and
none
column.
grid-template-rows / grid-template-
It is used to specifies the size of rows and columns.
columns
grid-template-areas It is used to specifies the grid layout using named items.
grid-template-rows / grid-auto- It is used to specifies the auto size(height) and sets the
columns auto size columns.
grid-auto-rows / grid-template- It is used to specifies the auto size and sets the auto grid
columns size columns.
grid-template-rows / grid-auto-flow It is used to specifies how to place items and auto size
grid-auto-columns row and columns.
grid-auto-flow grid-auto-rows / It is used to specifies how to place items and auto size
grid-template-columns row and grid-template columns.
Absolute length units
The following are all absolute length units — they are not relative to anything else, and are
generally considered to always be the same size.
Unit Name Equivalent to
cm Centimeters 1cm = 37.8px = 25.2/64in
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/6th of 1in
pt Points 1pt = 1/72nd of 1in
px Pixels 1px = 1/96th of 1in
Most of these units are more useful when used for print, rather than screen output. For example,
we don't typically use cm (centimeters) on screen. The only value that you will commonly use
is px (pixels).
Relative length units
Relative length units are relative to something else. For example:
• em is relative to the font size of this element, or the font size of the parent element when
used for font-size. rem is relative to the font size of the root element.
• vh and vw are relative to the viewport's height and width, respectively.
Additional:
The fr unit (a “fraction”) can be used when defining grids like any other CSS length such as %,
px or em.
rem is useful for creating a flexible and responsive design, while px is useful for having precise
control over the size of an element.
Using media queries
Media queries allow you to apply CSS styles depending on a device's media type (such as print
vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio,
browser viewport width or height, user preferences such as preferring reduced motion, data usage,
or transparency.
Media queries are used for the following:
• To conditionally apply styles with the CSS @media and @import at-rules.
• To target specific media for the <style>, <link>, <source>, and other HTML elements with
the media= or sizes=" attributes.
• To test and monitor media states using
the Window.matchMedia() and EventTarget.addEventListener() methods.
For example, this CSS targets printers:
CSSCopy to Clipboard
@media print {
/* … */
}
You can also target multiple devices. For instance, this @media rule uses two media
queries to target both screen and print devices:
CSSCopy to Clipboard
@media screen, print {
/* … */
}
@media (hover: hover) {
/* … */
}
@media print and (orientation: portrait) {
/* … */
}
@media (max-width: 1250px) {
/* … */
}
@media (width <= 1250px) {
/* … */
}
@media (min-width: 30em) and (max-width: 50em) {
/* … */
}
@media (30em <= width <= 50em) {
/* … */
}
A viewport represents the area in computer graphics being currently viewed. In web browser
terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the
part of the document you are viewing.
• On larger monitors where applications aren't necessarily full screen, the viewport is the
size of the browser window.
• On most mobile devices and when the browser is in fullscreen mode, the viewport is the
entire screen.
• In fullscreen mode, the viewport is the device screen, the window is the browser window,
which can be as big as the viewport or smaller, and the document is the website, which can
be much taller or wider than the viewport.
To recap, the viewport is basically the part of the document that is currently visible.
<meta name="viewport" content="width=device-width" />
The width property controls the size of the viewport. It should preferably be set to device-width,
which is the width of the screen in CSS pixels at a scale of 100%. There are other properties,
including maximum-scale, minimum-scale, and user-scalable, which control whether users can
zoom the page in or out, but the default values are the best for accessibility and user experience,
so these can be omitted.
