CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Responsive Grid-View

Many web pages are based on a grid-view, which means that the page is divided into columns.

A responsive grid-view often has 12 columns.

1
2
3
4
5
6
7
8
9
10
11
12

Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and grow as you resize the browser window.



Creating a Responsive Grid-View

To create a responsive grid-view, first, apply box-sizing:border-box; to all HTML elements using universal selector.

The box-sizing property allows us to include the padding and border in an element's total width and height.

Use the float property to float columns along the left side.

The following example shows a simple web page, with two unequal columns:

25%
75%
Run code

The following example shows a simple web page, with three equal columns:

33.33%
33.33%
33.33%
Run code

The example above is fine if the web page only contains three equal size columns.

However, we want to use a responsive grid-view with 12 columns, to have more control over the web page.

First we must calculate the percentage for one column: 100% / 12 columns = 8.33333333%.

All these columns should be floating to the left, and have a padding of 15px.

Then we make one class for each of the 12 columns, col- and a number defining how many columns the section should span.

Run code

Each row should be wrapped in a DIV and the number of columns inside a row should always add up to 12.

The following example shows a web page with some styles and colors to make it look better:

Note: The webpage in the example does not adjust itself when you resize the browser window. In the next chapter you will learn how to fix that.