New grid on inline-block: description, usage example, pros and cons

For modern typesetting the use of the grid is not new. Almost all html frameworks use this or that grid. I met 3 types of mesh:

• mesh float;
• grid on inline-block;
• mesh on flexbox.

The inline-block grid has its own characteristics, pros and cons, which should be considered.

Introduction

The grid in which the float: left or float: right property is used to position elements in a row is used in most html frameworks (Foundation, Bootstrap, etc.). It has its pros and cons. I think it is popular because it was the first decent solution after tabular layout, and is also supported by older browsers. However, working with her, I met at least 2 significant drawbacks in her.

1. An element with a given float property has no height and therefore it is difficult to align the child elements vertically.
2. If several elements with the float property are arranged horizontally in one row and the previous element (let it be element A) has a greater height than the subsequent ones (elements B), then when moving to the next line one of the elements B may “catch hold of” element A Do not get to the top of the line. In frameworks, this problem is solved by the presence of a row element (in Bootstrap, this is the row class), but then you need to clearly know how many elements will be in a row. And if the goods on the category page are displayed in a cycle and on the desktop they should be located in 5 in a row, and on the mobile one - in 3?

These shortcomings led me to look for other solutions. Naturally, a good solution is a grid using flexbox, which allows you to flexibly customize the location of elements inside the container. Its main disadvantage is support only by modern browsers. But I wanted to try other solutions. After reading a few articles on the use of elements with the display: inline-block property for aligning elements and arranging them in a row, I began to look for a grid on an inline-block. However, I did not find anything ready for use in projects. Only individual blanks. Therefore, I decided to create such a grid myself. For class names, I used the BEM (Block-Element-Modifier) ​​methodology. So let's look at what happened.
')

Breakpoints and Tag Normalization

The grid uses the following breakpoints (control widths of the browser, at which the location of the blocks changes) and prefixes for them:

• xs: 480px
• sm: 768px
• ms: 1024px
• md: 1280px
• lg: 1440px
• mg: 1680px

For the grid, the minimum normalization of the elements necessary for the correct display of the content is used:

* { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow-x: hidden; } html { font-size: 10px; } 

However, you can use it with other libraries (Reset.css, Normalize.css, etc.). In the grid, also, all sizes are indicated in units of rem, which are relative to the font of the html element. Therefore, for scaling, the html font at different breakpoints changes:

 @media (max-width: 1680px) { html { font-size: 9.5px; } } @media (max-width: 1440px) { html { font-size: 9px; } } @media (max-width: 1280px) { html { font-size: 8.5px; } } @media (max-width: 1024px) { html { font-size: 8px; } } @media (max-width: 768px) { html { font-size: 8.5px; } } @media (max-width: 480px) { html { font-size: 7px; } } 

The default grid uses 24 columns and the following indents between the blocks: 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50. About the indents should be explained. Indent, say, 15 is not 15px! This means that the width of the browser is 1920px (which I take as a starting point, since for this width the site design is most often created) the block indent on one side will be 15px. And given that the html font at this width is 10 pixels, the indent in the grid is given as 1.5rem. At a smaller width, the html font will be smaller and the padding will also decrease.

Breakpoints, number of columns, indents and start font html can be changed in the SASS version of the grid and generate the grid needed for the project.

Main grid blocks

In the grid, I use 3 main blocks:

• class grid - to indicate the external unit;
• box class - to designate an additional block inside the grid;
• cell class - for internal blocks inside a grid or box.

Total, the grid has the following structure:

 <div class="grid"> <div class="box"> <div class="cell"> 1</div> <div class="cell"> 2</div> <div class="cell"> 3</div> </div> </div> 

Or this:

 <div class="grid"> <div class="cell"> 1</div> <div class="cell"> 2</div> <div class="cell"> 3</div> </div> 

If so, then the question immediately arises: Why then an additional box ? The box block can only be one inside the grid and is necessary if you need padding between the internal blocks or alignment of the internal blocks.

Grid block modifiers

The grid block has the following modifiers:

• The grid-size is used if the block width is fixed and on each breakpoint it is equal to the width of the previous breakpoint. For example, if the browser width is 1366 pixels and the grid-size modifier is specified in the grid block, the block will be 1280 pixels wide and will be located in the middle.
  
  
• grid - st , grid - sm , grid - ms , grid - md , grid - md , grid - mg - is used if necessary, so that the width, starting with some breakpoint, is fixed, and This block will spread across the entire width. For example, if you use the grid modifier - md, then at widths less than 1280 pixels a block will have a width of 100%, and starting from a width of 1280 pixels will be equal to this width.
  
  
• grid - col24 applies if you want to use columns of the specified width. Since you can generate a multi-column grid (for example, 24 columns and 35 columns), you can use the grid modifiers - col24 and grid - col35 . The first will give the opportunity to place the elements of 2, 3, 4, 6, 12 in a row, and the second - 5 and 7 in a row. This is necessary if the design uses a different number of columns.
  
  
• grid - g10 , grid - v10 , grid - gv10 set indents between internal blocks (cell), respectively, only horizontally, only vertically and in both directions. The number at the end (in this case 10) indicates the width of the indent on one side. For example, if we want the indents between the internal blocks in 3rem only horizontally, then the external block needs to specify the grid modifier - g15 . However, there are 2 subtleties:
  
  
  1. Horizontally, a block can have the same indents both on the right and on the left, while a vertical indent is made in the bottom from the bottom. This is done for convenience, since basically the first block starts from the top without indentation, and the blocks coming from the bottom should be separated from it by indent;
     
     
  2. Indents are made only inside between the internal blocks, and from the outside they fit snugly to the external block.

Box block modifiers

The box has the following modifiers:

• box - left , box - right , box - center , box - justify is used if you want to align the columns horizontally respectively to the left, right, center, and across the width.
  
  
• box - top , box - bottom , box - middle is used if you want to align the columns vertically, respectively from above, below and in the center.

Cell block modifiers

The cell block has the following modifiers:

• cell - none , cell - auto , cell - full set how the internal block will be displayed by default: will it be hidden, have its own width or extend to the entire width of the parent;
  
  
• cell - col1 , cell - col2 , cell - col3 , etc., determine the specific initial width of the indoor unit. For example, the cell-col2 modifier means that the block will occupy 2 columns;
  
  
• cell - st5 , cell - xs10 , cell - md15 , etc., is the width of the indoor unit at a certain breakpoint. For example, the cell modifier - md15 means that the block width will be 15 columns with a screen width of <1280px (md).
  
  
• cell - left , cell - right , cell - center , cell - justify set the alignment of the elements of the inside of the block horizontally, respectively, to the left, right, center, and across the entire width;
  
  
• cell - top , cell - bottom , cell - middle specify vertical alignment, respectively from above, below and in the center. However, it should be noted that since the internal blocks have the display: inline-block property, then they are vertically aligned to each other, and not to the parent! Therefore, in order to align vertically in the block, for example, in the center, you need to put the cell - middle modifier on both blocks.

An example of the use of modifiers

The following code shows how various modifiers can be used together:

 <div class="grid grid--col24 grid--size grid--gv15"> <div class="box box--middle"> <div class="cell cell--none cell--md8 cell--sm24">  1 </div> <div class="cell cell--none cell--md8 cell--sm24 cell--center">  2 </div> <div class="cell cell--none cell--md8 cell--sm24 cell--right">  3 </div> </div> </div> 

Conclusion

The source files of the grid and an example of its use can be viewed here . Note that the repository has a grid-inline-block.css file with a compiled grid with the above parameters. But there is also a grid-inline-block.scss file, using which you can compile your grid version.



The created mesh has its advantages:

1. Solves problems with the grid on float and does essentially the same thing.
2. Unlike the grid on the float, it can align elements vertically, as well as set a different number of columns or different paddings.
3. Unlike the grid on flexbox, it is supported by older browsers, for example, IE9 and older versions of Android.
4. Allows internal blocks to hide or show at the desired screen width.
5. It has an interesting ability to align elements vertically relative to each other. This is useful for menu items.
6. A large number of internal blocks with different modifiers can be located within the same external block and they will not interfere with each other.
7. Allows you to create an infinite nesting of external blocks.

However, the grid and not without flaws. Here are some of them:

1. When specifying the last external block (for example, the site footer) of the grid modifiers - v10 or grid - gv10 (10 is for example), that is, which set the vertical internal indent, this last block will not be pressed to the bottom of the page. This is due to the fact that the negative margin-bottom, which is used here does not work in combination with the lower border of the body. You can solve this problem simply by not specifying the specified modifiers to the last block.
2. Although the grid has some flexibility in aligning the indoor units, it doesn’t compare with the flexbox.
3. If for some reason the internal block became larger in width than the place it was allotted (this can happen if you do not specify a specific width for the internal blocks, and is limited only to the cell class), then this block will jump to a new line that often not desirable. Therefore, such moments need to think through immediately.

I can not say that this grid is the best and that everyone should use it. But I think she has the right to exist along with others.