Introduction
Materialize is a responsive front-end framework that helps developers build modern, responsive websites and web applications. It is based on the concept of a grid system, which is a fundamental part of its layout structure.
The grid system in Materialize is designed to make it easier to create responsive layouts. It is based on a 12-column grid, where you can divide the horizontal space of a web page into 12 equal columns.
This allows you to create flexible and adaptable layouts that adjust to different screen sizes and devices.
![Materialize CSS Grids]()
Why Materialize CSS?
Materialize CSS offers several advantages, making it a popular choice among developers to build modern and responsive websites.
Here are some key reasons why Materialize CSS is often preferred:
- Responsive Design: Materialize CSS provides a responsive grid system that allows you to create layouts that adapt seamlessly to different screen sizes and devices. This ensures your website looks and functions well on desktops, tablets, and mobile devices.
- Material Design: Materialize CSS is based on Google's Material Design guidelines, which offer a visually appealing and modern design language. It provides pre-defined components, icons, and styles that align with Material Design principles, making creating cohesive and consistent interfaces easier.
- Easy to Use: Materialize CSS offers a comprehensive set of ready-to-use components and styles, which reduces the need for custom CSS coding. It provides intuitive class-based syntax and documentation, making it beginner-friendly and easy to learn.
- Customization: While Materialize CSS comes with pre-designed components, it also allows customization to suit your project's specific needs. You can easily override default styles or create your own themes using Sass variables and mixins.
- Rich Component Library: Materialize CSS provides a wide range of UI components, including navigation bars, cards, forms, modals, carousels, and more. These components are designed to be interactive, accessible, and feature-rich, saving development time and effort.
- Cross-browser Compatibility: Materialize CSS is designed to work consistently across different web browsers, ensuring a consistent user experience for your website visitors.
- Active Community and Support: Materialize CSS has a large and active community of developers, which means you can find help, tutorials, and resources easily. It also has regular updates and bug fixes, ensuring ongoing support and maintenance.
- Integration with JavaScript Frameworks: Materialize CSS seamlessly integrates with popular JavaScript frameworks like Angular, React, and Vue.js. This allows you to combine the power of Materialize CSS with the functionality of these frameworks for building robust web applications.
Installing Materialize CSS
To install Materialize CSS, you have a few options depending on your project setup and preferences. Here are the steps to install Materialize CSS using different methods
CDN (Content Delivery Network)
The simplest way to start with Materialize CSS is by including the CSS and JavaScript files directly from a CDN. This method doesn't require any local installation or setup.
Add the following lines of code within the <head> tag of your HTML file to include the Materialize CSS stylesheet:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Add the following line just before the closing </body> tag to include the Materialize JavaScript file:
Download and Host Locally
If you prefer hosting the Materialize CSS files locally, download them from the Materialize website (https://materializecss.com/) or the GitHub repository (https://github.com/materializecss/materialize). Download the compressed CSS and JavaScript files (e.g., materialize.min.css and materialize.min.js) from the desired source. Place the downloaded files in your project directory, such as in a CSS and js folder.
In your HTML file, link the CSS file by adding the following line within the <head> tag:
<link rel="stylesheet" href="css/materialize.min.css">
Include the JavaScript file just before the closing </body> tag:
<script src="js/materialize.min.js"></script>
Package Managers (npm or Yarn)
If you are using a package manager like npm or Yarn for your project, you can install Materialize CSS as a dependency.
Open your terminal or command prompt and navigate to your project directory.
Run the following command to install Materialize CSS using npm:
npm install materialize-css
Or using Yarn:
yarn add materialize-css
After the installation, you can import the Materialize CSS files in your project as needed, typically using build tools like Webpack or manually including them in your HTML file.
Once you have installed Materialize CSS using one of the above methods, you can start utilizing its classes, components, and styles to create responsive and visually appealing web pages. Make sure to refer to the Materialize CSS documentation for detailed usage instructions and examples.
Materialize CSS Class Name & Description
| Class |
Description |
.container |
Sets a maximum width container that centers the content horizontally. |
.row |
Creates a horizontal row to contain columns. |
.col |
Defines a column within a row. |
.sX, .mX, .lX, .xlX |
Specifies the number of columns a column should span on different screen sizes (X being a number from 1 to 12). |
.offset-sX, .offset-mX, .offset-lX, .offset-xlX |
Creates an offset for a column on different screen sizes. |
.header |
Applies a larger font size and bold styling to text. |
.flow-text |
Adjusts the font size based on the container and screen size, creating a flowing text effect. |
.truncate |
Truncates long text and adds an ellipsis (...) to indicate the text is truncated. |
.center-align |
Centers the text horizontally within its container. |
.right-align |
Aligns the text to the right within its container. |
.card |
Creates a card component with a shadow effect and predefined styling. |
.btn |
Styles a button component with a predefined appearance. |
.modal |
Defines a modal dialog component with an overlay and content area. |
.dropdown-trigger |
Attaches a dropdown menu to an element and triggers its display. |
.z-depth-X |
Adds a shadow effect to an element (X being a number from 0 to 5). |
.tooltipped |
Adds a tooltip to an element, displaying additional information on hover. |
.collection |
Styles a collection of items with predefined layout and spacing. |
.breadcrumb |
Creates a breadcrumb navigation component with separators. |
.chip |
Displays a small block with text and an optional close button. |
.carousel |
Creates a carousel slideshow component with slide transitions. |
.tabs |
Styles a set of tabs for content navigation. |
.collapsible |
Creates an accordion-like collapsible content component. |
These are just a few examples of the classes available in Materialize CSS. The framework offers a wide range of classes and components to style and structure your web pages efficiently.
Materialize CSS Columns for Small Screen Devices
We can use the .sX class to specify the number of columns a column should span on small screen devices. Here are some commonly used column classes for small screen devices.
| Class |
Description |
.s1 |
Column spans 1 out of 12 columns |
.s2 |
Column that spans 2 out of 12 columns |
.s3 |
Column spans 3 out of 12 columns |
.s4 |
Column spans 4 out of 12 columns |
.s5 |
Column spans 5 out of 12 columns |
.s6 |
Column spans 6 out of 12 columns |
.s7 |
Column that spans 7 out of 12 columns |
.s8 |
Column that spans 8 out of 12 columns |
.s9 |
Column that spans 9 out of 12 columns |
.s10 |
Column that spans 10 out of 12 columns |
.s11 |
Column that spans 11 out of 12 columns |
.s12 |
Column that spans the full width (12 columns) |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body style="margin:10px;">
<h1>Small Screen Devices </h1>
<div class="row">
<div class="col s12" style="background:#f00; padding:10px;">This column spans the full width on small screens</div>
<div class="col s6" style="background:green; padding:10px;">This column spans 6 out of 12 columns on small screens</div>
<div class="col s6" style="background:lime; padding:10px;">This column spans 6 out of 12 columns on small screens</div>
<div class="col s4" style="background:orange; padding:10px;">This column spans 4 out of 12 columns on small screens</div>
<div class="col s4" style="background:blue; padding:10px;">This column spans 4 out of 12 columns on small screens</div>
<div class="col s4" style="background:yellow; padding:10px;">This column spans 4 out of 12 columns on small screens</div>
</div>
</body>
</html>
![Materialize CSS Grids]()
Materialize CSS Columns for Medium Screen Devices
We use the .mX class to specify the number of columns a column should span on medium-screen devices. Here are some commonly used column classes for medium-screen devices
| Class |
Description |
.m1 |
Column that spans 1 out of 12 columns |
.m2 |
Column that spans 2 out of 12 columns |
.m3 |
Column that spans 3 out of 12 columns |
.m4 |
Column that spans 4 out of 12 columns |
.m5 |
Column that spans 5 out of 12 columns |
.m6 |
Column that spans 6 out of 12 columns |
.m7 |
Column that spans 7 out of 12 columns |
.m8 |
Column that spans 8 out of 12 columns |
.m9 |
Column that spans 9 out of 12 columns |
.m10 |
Column that spans 10 out of 12 columns |
.m11 |
Column that spans 11 out of 12 columns |
.m12 |
Column that spans the full width (12 columns) |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body style="margin:10px;">
<h1>Medium Screen Devices </h1>
<div class="row">
<div class="col m12" style="background:#f00;">This column spans the full width on medium screens</div>
<div class="col m6" style="background:yellow;">This column spans 6 out of 12 columns on medium screens</div>
<div class="col m6" style="background:green;">This column spans 6 out of 12 columns on medium screens</div>
<div class="col m4" style="background:pink;">This column spans 4 out of 12 columns on medium screens</div>
<div class="col m4" style="background:blue;">This column spans 4 out of 12 columns on medium screens</div>
<div class="col m4" style="background:brown;">This column spans 4 out of 12 columns on medium screens</div>
</div>
</body>
</html>
![Materialize CSS Grids]()
Materialize CSS Columns For Large Screen Devices
We can use the .lX class to specify the number of columns a column should span on large-screen devices. Here are some commonly used column classes for large-screen devices
| Class |
Description |
.l1 |
Column that spans 1 out of 12 columns |
.l2 |
Column that spans 2 out of 12 columns |
.l3 |
Column that spans 3 out of 12 columns |
.l4 |
Column that spans 4 out of 12 columns |
.l5 |
Column that spans 5 out of 12 columns |
.l6 |
Column that spans 6 out of 12 columns |
.l7 |
Column that spans 7 out of 12 columns |
.l8 |
Column that spans 8 out of 12 columns |
.l9 |
Column that spans 9 out of 12 columns |
.l10 |
Column that spans 10 out of 12 columns |
.l11 |
Column that spans 11 out of 12 columns |
.l12 |
Column that spans the full width (12 columns) |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body style="margin:10px;">
<h1>Large Screen Devices </h1>
<div class="row">
<div class="col l12" style="background:green;">This column spans the full width on large screens</div>
<div class="col l6" style="background:red;">This column spans 6 out of 12 columns on large screens</div>
<div class="col l6" style="background:orange;">This column spans 6 out of 12 columns on large screens</div>
<div class="col l4" style="background:pink;">This column spans 4 out of 12 columns on large screens</div>
<div class="col l4" style="background:brown;">This column spans 4 out of 12 columns on large screens</div>
<div class="col l4" style="background:yellow;">This column spans 4 out of 12 columns on large screens</div>
</div>
</body>
</html>
![Materialize CSS Grids]()
Conclusion
Materialize CSS provides a powerful grid system that allows you to create responsive and flexible layouts for your web pages. The grid system is based on a 12-column layout, and you can easily specify the number of columns a column should span on different screen sizes By using the .sX, .mX, and .lX classes, you can define the column sizes for small, medium, and large screen devices, respectively. These classes allow you to create responsive designs that adapt to different screen sizes and provide a consistent user experience across devices. In addition to the grid classes, Materialize CSS offers a wide range of other classes and components to style your web pages, including typography, colors, backgrounds, cards, buttons, modals, and more. The framework provides a comprehensive set of tools to build visually appealing and functional user interfaces.
Refer to the official Materialize CSS documentation for detailed usage instructions and examples. With Materialize CSS, you can efficiently create professional-looking layouts that are responsive and visually pleasing.