Grid for adaptive layout. Flexible Grids and Media Queries

Hi all! Today we will talk about what are grid systems? or just flexible grids in adaptive layout.

First let's define what it is Grid System.

Grid System- a collection of class-based styles that allow the user to control the page layout using a system of rows and columns.

Let's imagine we have a blog page. It is divided into 2 columns: the main part on the left, and the sidebar on the right. Let's try to create a flexible grid for such a page.

Well, first we have to do something basic, but... html markings

Here we have a block that contains the entire page, it contains a block with a blog, which contains 2 blocks: the main part of the page and the sidebar.

So our entire page will be the size 960px. The entire grid is divided into 12 columns 69px. each. The blog part will be wide 900px. The main part of the page will be 566px, sidebar - 331px.

This is what we get in the end

#page (
margin: 36px auto;
width: 960px;
}

Blog (
margin: 0 auto 53px;
width: 900px;
}

Blog.main (
float: left;
width: 566px;
}

Blog .sidebar (
float: right;
width: 331px;
}

Everything would be fine, but, as you can see, all this is static, defined in pixels. We want our grid to change its size depending on what screen the page is viewed on, therefore, we need to set everything in percent. Let's do this.

For this there is the same formula as for fonts

goal / context = result

Let's convert a block of the entire page from pixels to percentages.

#page (
margin: 36px auto;
width: 90%;
}

90% chosen because in this case we will also have indents along the edges along 5% . However, you can choose a different value.

We use our formula: 900 / 960 = 0.9357

Let's multiply the result by 100 to receive interest, and we will register it in our css.

Blog (
margin: 0 auto 53px;
width: 93.75%;
}

The same thing needs to be done with the columns, but notice that the context has changed. Because the columns are inside a block with a class .blog, then it will be the context. Let's do the math.

566 ÷ 900 = .628888889

331 ÷ 900 = .367777778

We convert everything into percentages and write it in the style sheet.

Blog.main (
float: left;
width: 62.8888889%;
}

Blog .sidebar (
float: right;
width: 36.7777778%;
}

That's it! Now we have a flexible grid and can use it for layout.

As you can see, everything is very simple. The basis of a flexible grid, like a flexible font, is the same formula, remembering which, you can easily create responsive websites.

Note! As you can see, we ended up with quite long percentage values. Some may advise you to round them up, but you should never do this! Remember!

And that’s all for me, thank you for your attention and successful adaptive layout!

Let's continue the topic adaptive layout. Today we'll talk about one of the three pillars of adaptive layout - grid based layout(flexible gridbased layout). The other two are and flexible images(flexible images).

In the middle of the 20th century graphic designers popularized the concept typographical, or modular, mesh- a rational system of columns and rows in which modules with content could be placed. It looked fresh and very harmonious.

However graphic design and web design are, as they say in Odessa, two big differences. Key Point here is the page size. In typography, it is fixed, but a web page can stretch and shrink depending on what it is viewed on.

To apply to a web page modular grid should be used simple formula proportionality:

target/context=result

The easiest way to understand this formula is clear example. Let's say we have a website layout in two columns - a content part and a sidebar:

We will cover it with rubber. But here's the problem: how to set the width of both blocks? After all, if you write it in pixels, then they will no longer be rubber. This means you need to use percentages, not pixels. But excuse me, what values ​​should I write? All the same, you need to start from something.

You can, of course, estimate by eye: the content takes up approximately 70% of the total page width, and the sidebar - 30%. But the right layout designer never guesses anything by eye. We need the exact size.

This is what the formula of proportionality is for. We simply take the width of the inner blocks and divide it by the total width of the page. Here the entire page is context, and each of the internal blocks, respectively, target from the above formula.

660 / 960 = 0,6875
300 / 960 = 0,3125

All that remains is to convert these data into percentages. Without worrying too much, just move the comma two places to the right. We get:

68,75%
31,25%

It's as simple as that. However, let's complicate the task. Let's assume that our content part is divided into two more unequal parts. For example, on the left there is a narrow column with the date of the article and social buttons, located vertically, and the right column is wide, and we have the text of the article in it.

From the design layout we know that the width of this narrow column is 120 pixels, and the wide one is 520. How to convert these numbers into %? Again, apply the proportion formula. But this time, as context, we use not the entire width of the page, but the width of the block that contains these two columns, that is, the width of the content part, which is 660 pixels. Divide:

120 / 660 = 0,1818
520 / 660 = 0,7878

As a percentage we get 18.18% and 78.78%, respectively.

By the way, in modern style files that use adaptive layout, proper layout designers add such calculations as comments. For better clarity. This is what it usually looks like:

Content (
width: 68.75%; /* 660px / 960px */
}

I hope there are no difficulties with this. Let's move on!

Grid based layout

The examples discussed above are, of course, not yet a grid. Well, what kind of two-column grid? This modular grid is designed to help both designers and layout designers create complex sites with many columns and individual blocks.

That's why there was a mass convenient services and tools that implement this method easily and simply. For example, 960.gs. Here you can not only visually study the principle of markup based on a modular grid, but also download templates and use them.

In fact, such services are now a dime a dozen! They are also called frameworks. Choose which one you like best. Here's a great selection of 30 CSS frameworks for responsive web design.

What are these modular grids for?

First of all, modular grids are needed to visually organize content on a website page. This is not only aesthetically beautiful and pleasing to the user’s eye, but also convenient for the developers themselves. Especially if the site is really complex in structure and content.

In addition, such modular grids are much easier to make adaptive than randomly scattered blocks of different sizes.

And, of course, the speed of development of such sites is much higher. You don't have to fool around and reinvent the wheel from scratch. All you need to do is choose a suitable framework and design your website using it.

I hope now you know what adaptive layout based on a modular grid is.

Next time we’ll talk about flexible images in responsive layout. A very important and controversial topic. I also recommend studying it thoroughly so as not to get into trouble. Stay connected! Better yet, subscribe to the Web Council blog newsletter.

I hope this list helps someone. I tried to collect the most interesting systems.

NetBootstrap

Google Material Design. Most designers have come across this system, which is very convenient in nature. The manuals are well described. One of the most advanced solutions on the market. But, unfortunately, it forces you to use Google systems, who do not stop changing them;)

This is a grid system based on display properties. flexboxgrid.com

Old system block layout HTML, it is now rarely used, although it provides enough interesting opportunity for changes.
Personally, I find it quite difficult to work with her.

There are many examples where you take bootstrap principles as a basis. It's a 6 or 12 speaker system, and designers are redesigning it. Change the size of individual blocks, make them unequal, and so on. This is a trend now.

Custom modular grid based HTML 100px / 200px / 300px / 400px

Crow Grid Framework

Crow v3.0 – smart grid framework

Compared to other systems, it is not very popular, interesting and fresh, reminiscent of the constructivism of posters. Perhaps one day it will become very popular.

Human Interface Guidelines

Design principles – Brief description –
Learn about iOS app development.developer.apple.com

Very little has been said about modular systems, but their principles are very interesting. Of course, it is primarily suitable for iOS.

Human Inter

Human Inter mesh

Human Inter is a rather unique system that is not suitable for every project. It is based on the principle and the Vitruvian man. When used one of the most important aspects is horizontal line. This is a grid based on bootstrap.
If you would like to see the rules and user guides for this system, please email me: ivantsanko11@ gmail. com

These days there are frameworks for everything, and it seems like once you figure one out, another will take its place. This is especially true for responsive grid CSS frameworks, and everyone calls themselves “the best.” This overabundance of information is confusing.

Let's take a step back, take a deep breath, and ask ourselves: are we really going to use all 24 options, and a million of their combinations, that “This Coolest Framework” gives us? Often we need a simple, flexible solution, with a limited number of variations, and with a code base that we can expand at any time. I want to talk about four techniques CSS implementations grids, each of which is easily expandable. These are the four ways:

1. Adaptive grid layout #1 (using negative padding)
2. Adaptive grid layout #2 (using box-sizing: border-box)
3. Adaptive grid layout based on table display
4. Flexbox-based responsive grid layout

I will simplify the description of these methods, and will use a minimal amount of simple and understandable CSS. Each method will have a demo on CodePen.

General CSS

Before we dive into each method, let's take a look at the common styles we'll be using throughout the examples. I'll use the box-sizing: border-box declaration for all document elements, and also add a .clearfix class to clear floating boxes. Here's our basic CSS:

/* reset properties */ *, *:before, *:after ( box-sizing: border-box; ) .clearfix:after ( content: ""; display: table; clear: both; )

Method 1: use negative padding

This method is based on using negative padding to create grid blocks with a fixed padding between blocks. The size of the negative padding varies depending on the block's position in the grid, but the distance between blocks remains constant. Let's look at the markup:

/* grid */ ( margin-bottom: 20px; ) :last-child ( margin-bottom: 0; ) ( ) @media all and (min-width: 768px) ( /* all cols margin */ ( margin-right : 20px; ) :last-child ( margin-right: 0; ) /* make the columns adaptive */ .col-1-2 ( float: left; width: 50%; ) .col-1-4 ( float: left ; width: 25%; ) .col-1-8 ( float: left; width: 25%; ) /* 2 span rows */ .row-2 ( padding-left: 20px; ) .row-2 :first- child ( margin-left: -20px; ) /* 4 span rows */ .row-4 ( padding-left: 60px; ) .row-4 :first-child ( margin-left: -60px; ) /* 8 span rows */ .row-8 ( padding-left: 60px; ) .row-8 :nth-child(4n+1) ( margin-left: -60px; ) .row-8 :nth-child(5n-1) ( margin-right: 0; ) .row-8 :nth-child(6n-1) ( clear: both; ) ) @media all and (min-width: 1200px) ( /* adjust width */ .col-1 -8 ( float: left; width: 12.5%; ) /* 8 span rows */ .row-8 ( padding-left: 140px; ) /* reset these... */ .row-8 :nth-child( 4n+1) ( margin-left: 0; ) .row-8 :nth-child(5n-1) ( margin-right: 20px; ) .row-8 :nth-child(6n-1) ( clear: none; ) /* and add this */ .row-8 :nth-child(1) ( margin-left: -140px; ) )

As you can see, within the media query conditions, a fixed indentation value (let's call it x) is multiplied by the number of columns in the row minus 1 (n-1), and this indentation is applied to the row on the left. Each column, except the last one, has a fixed right indentation (x). And the first column in the line is given a negative indentation (n-1)*x

Disadvantages and errors

Some calculations are required, and the method becomes impractical as the number of columns increases. In addition, as we increase the number of steps (the number of gradations of media queries, for example, 1 column per row, 4, 8...), we need to reset the CSS, and we have to use a lot of mathematical calculations.

Another interesting bug pops up when we have a lot of floating elements. Total amount indentations may at some point be combined, and the elements will be transferred to new line. This can be seen in the case of 8 columns. If you change the condition of the last media query to a minimum width of less than 1200px, you can see this bug in action. Remember this. But this method also has its advantages.

Benefits and use in practice

The real beauty of this method is the creation of fixed/variable size grid combinations. As an example, let's imagine a variable width main content area, and an optional side area fixed width. Our HTML code might look something like this:

And the CSS is like this:

/* markup */ .primary ( margin-bottom: 20px; ) @media all and (min-width: 600px) ( .container ( padding-right: 300px; ) .primary ( float: left; padding-right: 60px; width: 100%; ) .secondary ( float: right; margin-right: -300px; width: 300px; ) )

Here's a demo of the code in action on CodePen:

Method 2: use box-sizing: border-box

This method uses the full power of box-sizing: border-box . Since this property allows us to add margins to an element without their value affecting the overall width of the element, we can still achieve a flexible grid with fixed “padding”. But here instead of using margin properties, we will use internal margins, which will act as padding between grid elements.

Markup:

We'll skip the mind-boggling math here, so our CSS will be really simple. And here it is, with the ability to layout up to 8 columns:

/* grid */ .row ( margin: 0 -10px; margin-bottom: 20px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px; ) @media all and (min-width: 600px) ( .col-2-3 ( float: left; width: 66.66%; ) .col-1-2 ( float: left; width: 50%; ) .col-1-3 ( float: left; width: 33.33%; ) .col-1-4 ( float: left; width: 25%; ) .col-1-8 ( float: left; width: 12.5%; ) )

Negative right and left margins on each line are needed to compensate for column margins. At the minimum width specified by the media query, our grid elements take on their own width, and become floated within their containers. You can change this width as you wish, or specify different media queries for different groups of grid elements.

Let's expand this method:

Let's say you would like the .col-8 elements to be split 4 per row first, and then 8 per row. This is quite simple to implement if you think about it a little. For the above markup, our CSS would look like this:

@media all and (min-width: 600px) ( .col-1-8 ( float: left; width: 25%; ) .col-1-8:nth-child(4n+1) ( clear: both; ) ) @media all and (min-width: 960px) ( .col-1-8 ( width: 12.5%; ) .col-1-8:nth-child(4n+1) ( clear: none; ) )

Method 3: use table display

This method implements the good old table behavior, but without breaking the semantics or structure. In this method, visible elements are displayed as blocks by default. But when certain sizes Grid rows become tables, and columns become table cells. Let's take a look at the markup - it's similar to the one from the second method, but we don't need .clearfix here:

And, accordingly, CSS:

/* grid */ .row ( margin: 0 -10px; margin-bottom: 10px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px; ) @media all and (min-width: 600px) ( .row ( display: table; table-layout: fixed; width: 100%; ) ( display: table-cell; ) /* set col widths */ .col-2-3 ( width: 66.66%; ) .col-1-2 ( width: 50%; ) .col-1-3 ( width: 33.33%; ) .col-1-4 ( width: 25%; ) .col-1-8 ( width: 12.5% ; ) )

This method may seem confusing, but it has benefits. For starters, we don't break semantics by using traditional tables, and we don't need to clean up floating blocks. Columns of the same height - easy. A combination of fixed columns and variable width columns? No problem. The tabular display option brings its own problems, and of all four methods it is my least favorite. Despite the fact that in some cases it is a good option.

Method 4: Flexbox

The last method I'll describe uses the flexbox module. According to MDN:

CSS3 Flexible Box, or flexbox, is a layout mode that provides the ability to place elements on a page so that they behave predictably on the page. various sizes screen and various devices Oh.

Flexbox offers many different options, giving us a powerful arsenal various options arrangement of elements. Making a flexbox module responsive couldn't be easier. As before, our markup looks like this:

Now let's look at our new CSS:

/* grid */ .row ( display: flex; flex-flow: row wrap; margin: 0 -10px; margin-bottom: 10px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px ; width: 100%; ) @media all and (min-width: 600px) ( /* set col widths */ .col-2-3 ( width: 66.66%; ) .col-1-2 ( width: 50% ; ) .col-1-3 ( width: 33.33%; ) .col-1-4 ( width: 25%; ) .col-1-8 ( width: 12.5%; ) )

IN in this case for rows, you need to set the display property to flex and also specify the flex-flow property. Full Definition and a description of these properties is available in the MDN documentation for flexbox. For a media query, we simply change the width of the columns and let flexbox do the rest for us.

Conclusion

We looked at 4 ways to create responsive grids using CSS, each with its own advantages and disadvantages. There is no absolute way to do something, and I often find myself in situations where one way is better than another, or I need to combine several options. Methods 1 and 2 are my favorites, and I often use them in my projects (basic layout using method 1, and adaptive grids using method 2).

As mentioned earlier, the third method has its advantages, but I prefer to use table layouts only when strictly necessary. Method 4 is great and I can't wait to transfer it to all my projects. Flexbox is gaining traction, but it is only supported in IE10 and above. There are polyfills for it, but I prefer to do without them. Although there are still scenarios today in which flexbox would be an excellent solution (for example, in mobile browsers, where there is no IE).

Each of these methods is easily scalable and expandable. Using the ideas presented, you can easily customize your own responsive layout with the desired placement for grid elements with a minimum amount of CSS. Module CSS grids on the way, but it will be some time before we can use it. I hope you enjoyed the article and are now less intimidated by using CSS grids.

Responsive design is becoming more and more popular every day. Such websites target a wide audience as users can view such websites from a variety of devices. Today in this collection we will look at useful tools to create responsive websites.

A tool for creating beautiful titles that includes sets various fonts and styles.

Ready-made solutions for creating responsive websites.

Article about layout patterns.

Here you will find a library of templates along with a tutorial on creating wirenames.

Tools for responsive images and text

Adaptive Images is a PHP script that works on any website. Adaptive Images detects the screen size and adjusts the image size to fit it, resulting in a small image size on small screens.

A grid of images that can be used as background image and which adapts to the size of the monitor screen.

This jQuery plugin will allow you to change the font and be sure that everything will remain in place, regardless of device or browser. This way scalable headers can be achieved.

This tool will help you show 2 larger images with high resolution,optimized for Retina in responsive web designs.

Flexible Grids and Media Queries

Free Responsive CSS Grid Generator

With this calculator you can easily turn your psd source into a natural template.

With gridpak you can generate a modular grid and CSS framework for adaptive design your project.

Used to create a "reasonable" template. It uses extensions such as LESS, SCSS or Stylus to make your site more efficient.

This grid system will help you create responsive layouts.

A service with which you can test your website using an 18-column grid.

Optimized to work on screens of varying sizes mobile devices up to 1280px wide monitors. It's simple and flexible mesh, which uses Media Queries.

A very simple installation and configuration process, variable column widths and indents, any number of columns. It is also possible to switch to 1140px markup.

This is a fast and lightweight Polyfill (a piece of code that adds functionality not supported by the browser) created by Scott Jehl to support the min-width and max-width properties from CSS3 Media Queries in IE6-IE8 and above.

The css3 mediaqueries.js library will add support for CSS3 media queries to older browsers (IE 5+, Firefox 1+, Safari 2).

It's very small (<1 кб) javascript-файл, который может загружать определенные CSS-файлы в зависимости от ширины веб-страниц. Перед тем, как браузер полностью загрузит страницу, плагин проверяет ширину дисплея и автоматически определяет, какой CSS-файл нужно загрузить.

A tool for rapid prototyping of responsive design. You can design CSS for a variety of popular screen sizes, orientations, and browsers, be it phones, tablets, monitors, or TVs (720p, 1080p).

Tiny Fluid Grid will help you create your own fluid grid of 12, 16 or 24 columns, set their maximum and minimum width and padding percentage.

Frameworks for creating responsive design

You'll get cross-browser compatibility for smartphones and good support for older BlackBerry, Symbian and IE Mobile.

320 and Up is based on a mobile-first approach, where designs are created for mobile screens first and then expanded for tablets, desktops, and larger screens. It works well both as an addition to the HTML5 boilerplate and on its own.

Very simple and straightforward, there are no predefined markup systems or non-semantic classes. Is a starting point and needs to be edited, customized and rewritten to suit your requirements.

12-column layout, 960px maximum, and uses a lot of media queries.Supports Chrome, Safari, Firefox, IE 7 and higher, mobile versions of browsers

It is a front-end toolkit for rapid web application development. LESS language, 12-column adaptive layout, support for mobile devices, tablets and monitors, many components, buttons, drop-down menus, custom style of input fields, lists, headings, labels, icons, alerts, tabs, progress bars, tooltips, “accordion”, “carousel”, and so on, various Javascript plugins, Scaffolding support, including applying Bootstrap style to already created HTML.

Less Framework 4 contains 4 layouts and three sets of typography, all based on a single grid. There is also a CSS generator.

SASS based, object oriented.

Flexible layout that allows you to quickly arrange elements on the page, multi-level columns, and can be adapted to any size.

Adaptive plugins

Creating a reliable method for safely using CSS overflow in responsive designs, supporting polyfill in non-native environments.

The Isotope plugin allows you to change the entire grid of blocks on the page depending on the screen resolution. This plugin includes filtering and sorting capabilities that will allow you to arrange the elements on your site according to your own wishes. Moving blocks when changing the page width is accompanied by a nice animation.

A plugin that implements the effect of moving tiles of blocks on a page. You change the screen size - the blocks fill the entire available width space.

TinyNav.js is a lightweight plugin that allows you to transform large navigation lists into small dropdown menus for small screens.

With this plugin you can make your video responsive.

Wookmark is a plugin for creating a dynamic multi-column template.

Testers and debuggers

Helps resize the browser window. You will simply need to click on the size indicator in which you would like to see your site.

With Responsivepx, you can not only test your site (even locally), but also get recommendations that you can use in media queries to create a responsive design.

This tool is for anyone who needs a quick and easy way to test their created website at different screen widths. You can check the site either online or by downloading the code from Github.

The Responsinator will show you what your responsive website layout looks like on popular devices.

You just need to enter the address of your site and see how it will be displayed on different devices.

Free utility for testing responsive design. To check the template, you need to enter the site URL, select the type of mobile device, or set the borders of the viewing window.

Aptus
With this tool, you can easily view, edit, and take a screenshot of your responsive website.

Allows you to see what your website looks like on popular devices.

Resizer is very comfortable bookmarklet for testing responsive templates in just a few clicks.

Responsive sliders

The Blueberry plugin organizes a nice and concise image gallery that adjusts to the size of the parent element.