Materialize CSS Grids Last Updated : 24 Mar, 2022 Comments Improve Suggest changes Like Article Like Report There are 12 standard columns fluid responsive grid systems that helps you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are used to specify a column with sub-classes. There is a container class used to center the page content. The container class is set to ~70% of the window width. To add a container just put your content inside a <div> tag with a container class. Here is the syntax: <body> <div class="container"> <!-- Page Content goes here --> </div> </body> Now let's understand how the grid system works: The standard grid has 12 columns. No matter the size of the browser, each of these columns will always have equal width. Remember when creating a layout that all columns must be contained inside a row and that you must add the col class to your inner <div>s to make them into columns. You can easily change the order of your columns with push and pull. Simply add push-s2 or pull-s2 to the class where s is the screen class-prefix (s = small, m = medium, l = large), and the number after is the number of columns that you want to push or pull. Example: html <!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <div class="green center"> <h2>GeeksforGeeks</h2> </div> <div class="row"> <div class="col s1 green center">1</div> <div class="col s1 green darken-3 center">2</div> <div class="col s1 green center">3</div> <div class="col s1 green darken-3 center">4</div> <div class="col s1 green center">5</div> <div class="col s1 green darken-3 center">6</div> <div class="col s1 green center">7</div> <div class="col s1 green darken-3 center">8</div> <div class="col s1 green center">9</div> <div class="col s1 green darken-3 center">10</div> <div class="col s1 green center">11</div> <div class="col s1 green darken-3 center">12</div> </div> <div class="row"> <div class="col s7 push-s5 green darken-1"> <span class="flow-text"> This div is 7-columns wide on pushed to the right by 5-columns. </div> <div class="col s5 pull-s7 light-green"> <span class="flow-text"> 5-columns wide pulled to the left by 7-columns. </div> </div> </body> </html> Grid Classes: The materialize grid system has four classes: .s (for mobile devices) .m (tablet devices) .l (desktop devices) .xl (large desktop devices) Mobile devices <= 600px Tablet devices > 600px Desktop devices > 992px Large desktop devices >1200px Class prefix.s.m.l.xlContainer width90%85%70%70%Number of Columns12121212 In the previous example, we only define the size for small screens using "col s12". By just saying s12, we are essentially saying "col s12 m12 l12". But by explicitly defining the size we can make our website more responsive. html <!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <div class="green center"> <h2>GeeksforGeeks</h2> </div> <!--Responsive layout--> <div class="row"> <div class="grid-example col s12 light-green center"> <span class="flow-text"> Always full-width (col s12) </div> <div class="grid-example col s8 m6 green center"> <span class="flow-text"> Full-width on mobile (col s8 m6) </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article Materialize CSS Helpers T tanvi_gupta Follow Improve Article Tags : Web Technologies CSS Materialize Materialize-CSS Similar Reads Materialize CSS Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. Google’s goal is to develop a system of design that allows for a unified user experience across all its products on any platform. 2 min read Materialize CSS Introduction and Installation Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. Materialize CSSMaterialize CSS is a modern front-end framework that enables developers to create visually appealing and responsive web applications with ease. Inspired 2 min read Materialize as CSSMaterialize CSS ColorsIt is created with HTML, CSS, and JavaScript, and designed by Google. Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Color: Here is a color palette based on the material design base colors. Each of these colors is 2 min read Materialize CSS GridsThere are 12 standard columns fluid responsive grid systems that helps you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are 3 min read Materialize CSS HelpersThere are several helpers in materialize CSS that are used for designing needs such as: AlignmentHiding/Showing contentFormatting 1. Alignment: Content can be aligned horizontally or vertically by using the following classes: Vertical Align: It can be easily done by adding the class valign-wrapper t 3 min read Materialize CSS MediaVarious classes are provided by materialize CSS to make media responsive. Images: Images can be styled in following ways: Responsive Images: To make images responsive to page width, responsive-img class is added with image tag. <img class="responsive-img" src="image.jpg"> Circular Images: To m 2 min read Materialize CSS Pulse and ShadowPulse: Used for get attention towards buttons with this subtle but captivating effect. Just required to add pulse class to buttons. Note: This is used only for floating button since it will not work with other components. <a class="btn-floating pulse"><i class="material-icons">battery_al 2 min read Materialize CSS | TablesTables are nice and easy way to organize a lot of data. Materialize CSS provides a few utility classes to style table. In addition to improve mobile experience, all tables on mobile-screen widths are centered automatically. Following are the styles for table: Stripped Table: html <!DOCTYPE html 3 min read Materialize CSS TypographyMaterialize CSS provides several elements that can be used for the typography of the page: HeadersBlockquotesFlow Text Headers: Materialize CSS provides basic styling to be used on the header tags. The tags below show the available header tags that are styled by Materialize CSS: <h1>Heading 1 2 min read Materialize ComponentsMaterialize CSS BadgesMaterialize badge is a component that is used to notify, if there are new or unread messages or notifications display. Adding a new class to a badge component gives it a background. There are different ways of using badge component: Badges in Collections: <div class="collection"> <a href="# 4 min read Materialize CSS ButtonsThe button component along with the links inside them are probably one of the most significant features allowing the users to interact with the web pages and perform various functions and move from one web page to other. Following are the various classes of buttons defined along with their effect: R 3 min read Materialize CSS BreadcrumbsBreadcrumbs in materialize CSS is used when you have multiple layers of content to display your current location. Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. It uses two classes i.e. nav-wrapper and breadcrumb. nav-wrapper is used to set the nav component 1 min read Materialize CSS CardsCards are a convenient means of displaying different types of relevant content. Materialize uses cards for presenting similar objects whose sizes and actions can be changed with the requirement. Here is an example of a basic card. html <!DOCTYPE html> <html> <head> <title>Pag 7 min read Materialize CSS CollectionsCollections allow you to group list-objects together. It represents various types of collection i.e., a group of related information . Following are the various collection class that are used for creating various types of collection: Basic: In this the div or ul container as a collection and the a o 4 min read Materialize CSS FooterFooter is an effective way to organize a lot of site navigation and information at the end of a page. This is the place where a user will look once they have finished scrolling through the current page or are looking for additional information about the website. Flexbox is used to structure the html 3 min read Materialize CSS IconsMaterialize CSS provides a rich set of material icons of google which can be downloaded from Material Design specs. Icon libraries that are supported by materialize css are Google Material Icons, Font Awesome Icons and Bootstrap Icons. Different icons can be selected from Material Icons. Library and 2 min read Materialize CSS NavbarsA navigation bar is a user interface element within a webpage that contains links to other sections of the website. It is displayed as a list of horizontal links at the top of each page. It is placed before the main content of the page or below the header. The navbar is contained in an HTML5 <nav 7 min read Materialize CSS PaginationPagination is used to separate the content into discrete pages that is short and easy to understand. Materialize CSS provide classes to create a pagination bar that holds the links to the other pages. The pagination class is used to set the <ul> list element as a pagination component. The page 2 min read Materialize CSS PreloaderPreloaders are used for providing symbolic messages that tells users about the website status like "Loading" or "Not crashed". Materialize provides CSS classes to give various types of preloaders. The following are the available classes provided by Materialize CSS.Linear: It identifies an element as 5 min read Materialize with JSCarousel using Materialize CSSMaterialize CSS is a UI component library that is created and designed by Google. It is a design language that combines the classic principles of successful design along with innovation and technology.Features:Responsive front-end CSS framework.It is browser-independent.Extensible.It is free to use. 3 min read Materialize CSS CollapsibleCollapsibles are accordion elements that allow you to expand or collapse the content when tapped and are useful to provide a compact presentation of the content. It allow to hide the content that is not immediately relevant to the user. Here is the syntax of a simple collapsible: <ul class="colla 3 min read Materialize CSS DropdownMaterialize CSS provides a dropdown facility that allows the user to choose one value from a set of given values in a list. To add a dropdown list to any button, it has to be made sure that the data-target attribute matches with the id in the <ul> tag. The main class and attribute used in a d 2 min read Materialize CSS ModalsMaterialize CSS uses modal component for creating dialog boxes, confirmation messages or presenting important content to the viewers where underlying content becomes inactive until the modal window is closed. In order for the modal to work, add the modal Id to the link of the trigger and include the 4 min read Materialize CSS TooltipsTooltips are small, textual but interactive hints that are used mainly for the graphical purpose. It helps the icons or buttons to give clarification of its function. To use this, tooltipped class is added along with its position such as: top, bottom, left or right. Syntax is as follow: <a class= 2 min read Materialize CSS WavesMaterialize includes an external library wave to create ink effect outlined in Material Design. Waves can be applied to any element, to use this effect on buttons, wave-effect class is added to the button. There are several ways by which waves can be classified. It can be done either by pre-created 2 min read Materialize FormsMaterialize CSS CheckboxMaterialize provides a checkbox feature for creating styled checkboxes for the websites. The standard HTML checkboxes are plain with a simple black border in unchecked and a tick mark in checked states, but with materialize border style can be changed along with the tick mark. For creating a checkbo 2 min read Materialize CSS SelectMaterialize provides a select feature to create options that can be easily selected to provide more information for the web forms. The following are different select feature: simple select-option: allows to select an option from select dropdown. For this, <select> and <option> tags are u 3 min read Materialize CSS SwitchesMaterialize provides switches to allow the viewer to select an option between the two available. Generally, switches are special checkboxes used for binary states such as on/off or yes/no or agree/disagree. Switches can be created by using the “switch†class inside the wrapper div with the input typ 2 min read How to we create Pagination in Materialize CSS ? Materialize CSS is a front-end UI library that is created by Google using the combination of HTML, CSS, and JavaScript. It is basically a design language that combines classic design along with modern innovations and technology. The purpose of Google behind developing Materialize CSS is to provide a 3 min read What are the different utility classes in Materialize CSS ? In this article, we will learn about the utility classes in Materialize CSS, along with understanding available classes and their implementation. The utility class is generally used to make designing easier along with organizing the content in the proper structure, which contains aligning the conten 7 min read What are the classes to create responsive image & video in Materialize ? In this article, we will see how to add responsive images and video to HTML files using Materialize CSS & will also see their implementation through the examples.Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Mater 2 min read Like