Scribd
Upload
5 views

W11 Materialize CSS - Part 1 - Presentation 2

The MaterializeCSS Grid System is a framework that helps designers organize web content using a structured grid layout, typically divided into 12 or more columns. It offers both fixed and fluid/responsive layouts to accommodate various screen sizes, with containers that can be set to standard or full width. Rows and columns are essential components, where rows hold columns that contain the actual content, ensuring that the total column width does not exceed 12 for proper alignment.

Uploaded by

Winter Equinox
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

W11 Materialize CSS - Part 1 - Presentation 2

The MaterializeCSS Grid System is a framework that helps designers organize web content using a structured grid layout, typically divided into 12 or more columns. It offers both fixed and fluid/responsive layouts to accommodate various screen sizes, with containers that can be set to standard or full width. Rows and columns are essential components, where rows hold columns that contain the actual content, ensuring that the total column width does not exceed 12 for proper alignment.

Uploaded by

Winter Equinox
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

MaterializeCSS Grid System

MaterializeCSS Grid System


• A grid, defined by Wikipedia as “a structure made up of series of intersecting
straight (vertical, horizontal and angular) or curved guide lines used to structure
content.” This grid helps designers organize graphic elements in an area or a
page.

• Grids are very useful in website design because it plays an important role in
managing and and arranging web and media elements in a web page.
MaterializeCSS Grid System
• Grid system is like dividing your website into columns (12, 24 and etc.).
Most developers and designers use it to speed up or simplify front end
development works. The reason behind this is because it has pre-defined
width sizes for standardization of webpage layout measurements. Web
design or CSS Frameworks have two kinds of Grid layouts: Fixed and
Fluid/Responsive.

• Fixed layout has fix column sizes in pixels. It is used for static website
design for all screen sizes. Adaptive fluid or Responsive grid layout adapts
or resize columns depending on the device screen size. It is perfect for
websites on cross screen devices, be it a desktop monitor, tablet or a
mobile device.
Container
• The container is not really part of the grid system, it is the “container” that holds
the page content. This CSS class provides a container with 70% of the browser’s
width that allows you to center the content. If you want to utilize the full width,
use container-fluid class instead. The container-fluid grid uses percentages on
columns unlike the default pixels and extends 100% width. It is used for
responsive fluid layouts.
Rows and Columns
• Rows are horizontal dimension of the grid system. It holds the Columns which is
the vertical aspect of the grid system. Rows are used to separate page contents,
line after line horizontally. Columns live inside rows. They hold the actual page
contents and fits inside rows in 12s.
This is an example of a row with columns. Inside the div with
the class row, lies the columns; the divs that have the class col
s1. The s in s1 stands for “small” that is intended for small
screen devices such as small smartphones.
This second figure shows a row with medium sized column that
is intended for tablets screens. And for desktop screens or large
screens we use the “l” prefix:
Screen Size Reference:

.s, .m, .l class prefix are used to bring responsiveness to the materializeCSS grid layouts. The number associated with
the class represents the division of the applied div to the row.
Examples:
Inside the row class div, the columns
must sum up to 12 or else it will bring
down any succeeding column that
exceeds the 12 limit because it
couldn’t fit the horizontal row.
Implementation – Example 1
12 instance of 1-size column for medium screen size to fit
an entire row. Extra color classes were added to let us see
its appearance.

Output:
A row with 12 columns inside
Implementation – Example 2
A row with 3 instance of 4-size columns for medium screens. It
will be a perfect fit on our row because
3 instance x 4 = 12.

Output:

3 instance of 4-size medium screen columns.


Implementation – Example 3

Output:
In a tablet or medium sized screen, the columns inside the row will have the
Medium size screen: following size accordingly: 3-column, 7-column and a 2-column grid.

Small size screen: On a small sized screen, the 3 columns with different sizes from the
medium screen view will turn into 3 equal sets of 4-column sized grid.
This is an example of a responsive grid layout.
Thank you…

You might also like