I will say right away what I can do) and on native CSS \ HTML and on Bootstrap. But I always come across the same problem! I do not understand how to typeset a block in which the pictures go (for example, examples of work or something like that). Who can once and for all explain how this is done. I need to know a few options, let's say there is a block wrapper and the pictures go in order in it, how to make them the same size and when changing the browser window they also remained, as far as I understand, they do it through “%” something comes out. The second option is the pictures between which there are gaps (that is, but they do not stick to each other), when I indent, everything drops out and the layout breaks, so that any number of pictures would remain in its block when the window is resized. I think you understand what I meant here. I will cite as an example a sketch of the code, if not difficult to show that yes how

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .container { width: 1000px; height: auto; border: 1px solid #bbb; margin: 0 auto; } .item { width: 25%; height: 160px; border: 1px solid red; display: inline-block; background-color: rgba(0,0,0,.4); }</style> </head> <body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>

Sample code for editing

2 answers 2

Following the example:

  1. If children specify width in percent and additional properties such as border or padding , do not forget to specify box-sizing: border-box .
  2. If the child elements specify display: inline-block without a float and you want that between them there is no uncontrolled indentation, then do not forget to add <!-- --> comments between the elements for horizontal reset and vertical-align: top; for vertical reset.

On the issue:

This problem is best solved using the fluid grid . Simply put, a rubber mesh is used.

1. If the elements should not be missing, then count the number of elements in the line and set the width = 100 / <кол-во элементов в строке> %.

2. Much more interesting is the task when we need the first one between the children. Usually two approaches: through margin or through padding .

Margins through margin :
The width is set approximately the same, only still minus the indent.
And here is the question. Indent in percentage or in px / em / rem? And the calculations begin, and the 'beautiful numbers' appear, margin: 3.45677% or margin: 12.45354px , etc. + the first or last element needs to be reset. In a word - 'beauty' .

Padding padding :
A much more flexible, simpler and easier way to set indents is through padding . All magic is to use box-sizing: border-box;

Element width = 100 / <кол-во элементов в строке> %.
Space between elements = padding * 2 . Those. if there should be 10px indentation between elements, then padding: 5px; . If only horizontally, then padding-left: 5px; padding-right: 5px padding-left: 5px; padding-right: 5px . Vertically respectively.
If you need indents in percent, then we do the same.
With this use, you need to make a reservation, indents are created on the sides, so that they can be removed by the parent container, the negative margins are set.
<parent margin>= - <child padding> .

Either we set the padding in one direction, for example, we set padding-left = all the elements between the elements, but then you need to reset the first element in the line or the padding-right and the last element.

I advise you to pay attention to the most simple and flexible grid, in my opinion, pocketgrid (when you click download, you will understand what I am talking about)

Recently I saw a slightly different approach, through calc , also deserves attention, but I have not reached it yet.

A small digression about images
When using a rubber mesh, of course, you need to understand that images cannot act as mesh elements, they must be inside these elements and you need to consider whether images of the same size or different. And from this to choose the approach, use img with max-width: 100%; height: auto; max-width: 100%; height: auto; or through background-image and background-size , etc. (+ alignment). Enough options.

    This is used by the jquery plugin http://masonry.desandro.com/ , take a look, as this demo is very convenient in the example

     // external js: masonry.pkgd.js $(document).ready( function() { $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true }); }); 
     * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { background: #EEE; max-width: 1200px; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } /* ---- grid-item ---- */ .grid-sizer, .grid-item { width: 20%; } .grid-item { height: 120px; float: left; background: #D26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; } .grid-item--width2 { width: 40%; } .grid-item--width3 { width: 60%; } .grid-item--height2 { height: 200px; } .grid-item--height3 { height: 260px; } .grid-item--height4 { height: 360px; } 
     <script src="http://masonry.desandro.com/masonry.pkgd.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <h1>Masonry - fluid columnWidth</h1> <div class="grid"> <div class="grid-sizer"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width2 grid-item--height2"></div> <div class="grid-item grid-item--height3"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item grid-item--width3"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item grid-item--width2 grid-item--height3"></div> <div class="grid-item"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item"></div> <div class="grid-item grid-item--width2 grid-item--height2"></div> <div class="grid-item grid-item--width2"></div> <div class="grid-item"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item--height3"></div> <div class="grid-item grid-item--height2"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item grid-item--height2"></div> </div>