Grid

⚠️ This is the most essential part of the knowledge that you need to understand in order to use the Materialize Dark theme effectively ‼️

Materialize Dark theme is created to use Materialize CSS Grid in it by default. This means that each individual piece of content or an entire block should be placed in a grid. This is supposed to be the default procedure when building page content.

What is the grid?

The entire content area is invisibly divided into 12 columns. This division applies to four different screen resolutions: S - for smartphones, M - for tablets, L - for laptops, XL - for large screens. This invisible divider is used to arrange individual elements or entire blocks of content into columns. The division of the content area into columns is written as CSS classes in the theme. Adding the appropriate class or more than one class to an content element defines how many columns it will occupy depending on what device it will be displayed on. The example below shows all 12 default columns of the grid. In this case, the division into 12 columns is valid on any type of device.

⚠️ If you want to see how the grid reacts, grab the right edge of the browser window with your mouse and make the window narrower or wider to simulate a change in screen resolution.

Example

To show how the grid works for different devices you can see an example below. Inside the following rectangle are written the grid classes assigned to it in the code. On a large screen (xl3) the rectangle will occupy three columns. On a laptop screen (l4) the rectangle will occupy 4 columns, on a tablet (m6) it will occupy 6 columns and on a smartphone (s12) all 12 columns. The html5 code simplified of the following rectangle looks like below, the span is the rectangle and the paragraph is the description inside:

<span class="col s12 m6 l4 xl3"><p>col s12 m6 l4 xl3</p></span>

⚠️ If you want to see how the grid reacts, grab the right edge of the browser window with your mouse and make the window narrower or wider. As you narrow the browser window, compare the width of the rectangle below to the number of columns above. The best way to check this is on a computer.

Aligning to left

Every single element placed to the grid column will be aligned to the left side of the content area. Individual elements or blocks of content are arranged next to each other in a kind of "row", from left to right, according to the width defined by classes applied by user - the number of columns occupied by a single element or block. When 12 columns are filled by one or more elements, the next elements are moved to the next "rows".

The two rectangles in the example below occupy 6 columns each when viewed on a laptop or large screen (one next to the other). On a tablet and smartphone, they each occupy all 12 columns (one above the other).

⚠️ If you want to see how the grid reacts, grab the right edge of the browser window with your mouse and make the window narrower or wider.

Why to use a grid

Grid is used for more logical, aesthetic and economical content filling. Arranging content in one column often creates a lot of empty space. The ability to arrange content into blocks that are displayed differently on different devices allows for better content organization and readability.

More about the grid

The Materialize CSS grid used in this theme has more features than those described here. Read more about the grid.