Vertical margins between columns using Sass using a bootstrap grid as an example. Adjusting the width of the columns and the spaces between them The distance between the columns is less than 1 meter

From this instruction you will learn how to use columns in text documents, how to align text in columns and change the distance between them, how to add breaks between columns.

Why use speakers

Most often, the column element is used in newspapers, magazines, brochures and flyers. In particular, for a print publication, a format with columns looks more attractive and professional.

You can create one, two or three columns of the same size. Then, as you type, you will automatically move to the next column when the previous one ends, unless you manually insert a column end. You can set the width of the columns and use the usual formatting that is used in regular text documents.

Online course "Word from simple to complex" Master the work in the main text editor at a high level. It doesn’t matter if you are a beginner or already work with Word, with our course you will become a real document guru!

Adding Columns

• Select the text you want to convert to columns.
• From the ribbon menu, select a tab "Layout", section "Page settings".
• Click on the button "Columns".
• From the drop-down list, select the desired number of columns (for example, three).

Note that unless you first select the specific area of ​​text you want to turn into columns, all text following the cursor is converted into columns.

Formatting Columns

When columns are created, by default they have an alignment similar to that of the text. And often this is left aligned. This is not the best option for columns, so it is better to format it to fit the width.

• Let's highlight our columns.
• "Home", section "Paragraph".
• Click on the “Align to Width” icon (a similar action can be achieved by pressing the keyboard shortcut Ctrl + J).

The text is spaced evenly within the columns. And the distances between the columns became more clear. These values ​​can be changed.

• Place your cursor anywhere within the columns you want to format.
• From the ribbon menu, select a tab "Layout", region "Page settings".
• Click on the button "Columns" and then select "Other Columns". The Columns dialog box opens.
• Enter values ​​for the width of the columns and the spacing between them. For example, enter 0.2 as the spacing to make the distances smaller.
• Click OK and evaluate the changes. If necessary, redo the path and change the values.

If you want to set columns of different widths, this is done in the same “Columns” dialog box. To set each column an ​​individual width, you first need to uncheck the checkbox "Columns of equal width". After this, the width and spacing values ​​for each column will become available for editing.

If, in principle, you only need two columns - one thick, the other thinner, then when creating columns through the “Columns” button, simply select the “Left” or “Right” value, depending on where the smaller column should be located.

Inserting a Column Break

• Click in the area where you want to insert a column break. That is, from where the text should move to the beginning of the next column.
• Select a tab from the ribbon menu "Layout"– region "Page settings".
• Press the button "Breaks", from the drop-down menu select "Column". The text following the cursor should appear in the next column.

Laboratory work No. 3

Columns and lists

Creating Columns

ü Two columns of equal width.

ü Three columns of equal width.

2. On the tab Page layout in Group Page settings click the button Columns

2. On the tab Page layout in Group Page settings click the button Columns.

One.

4. Click the button OK.

Setting the number of columns

2. In the tab Page layout in Group Page settings click the button Columns Other speakers(Fig. 2).

Number of columns(Fig. 3).

Apply

To the entire document.

To this section.

Until the end of the document.

Delimiter

6. Click the button OK.

Columns uncheck the box columns of the same width

5. In the area Sample

6. Click the button OK.

Ü Exercise

1. Copy from folder file to your personal folder.

Document with columns.

Rice. 7. Design of a numbered list

Rice. 8. Design of a bulleted list

To create a numbered or bulleted list as you type, do the following:

1. Place the cursor at the beginning of the list. If necessary, press the key to start a new paragraph.

2. Click the button arrow Numbering or Markers groups Paragraph tabs home(Fig. 7) and select the desired numbering option in the list gallery.

3. Enter list items by pressing the key at the end of each paragraph. Each new paragraph automatically becomes an item in a numbered or bulleted list.

4. At the end of the last paragraph, click twice.

Convert a numbered or bulleted list to plain text

Follow these steps to remove numbers or labels from a list, thereby converting the list text into regular paragraphs.

1. Select the paragraphs you want to convert. This could be the entire list or just part of it. The corresponding button on the formatting panel ( Numbering or Markers) will be pressed.

2. Press the button Markers or Numbering groups Paragraph tabs home or click the arrow on this button and select a mode No(Fig. 7, Fig. 8).

Sorting lists

When you create a list, you typically add items to it as information becomes available. Once the list is formed, you can organize it. To do this, do the following.

Select all items in the list.

1. In the tab home in Group Paragraph click the button Sorting(Fig. 9).

Rice. 9. Home Tab

2. The Sort Text dialog box will appear (Fig. 10).

Rice. 10. Dialog box Sort text

3. Select the sorting type from the drop-down list (Fig. 10).

4. Set the sort order (ascending or descending) (Fig. 10).

5. Click on OK.

Ü Exercise

1. Copy from folderH:\documents\Office\Lab files file to your personal folder Document for working with lists.

2. Open this document in Word.

3. Create a numbered list based on this text (choose your own style).

4. Save the received document in your personal folder under the name Numbered list.

5. Convert list text into regular paragraphs.

6. Create a bulleted list (choose your own style).

7. Sort the list alphabetically.

8. Save the received document in your personal folder under the name Bulleted list.

9. Close the document.

PLAN.

Inserting a symbol

To insert a symbol into a document, do the following.

1. In the tab Insert in Group Symbols click the button Symbol. Then select the command Other characters(Fig. 16).

Rice. 16.Insert tab

2. A dialog box will appear Symbol(Fig. 17).

Rice. 17.Dialog box Symbol

From the dropdown list Font select the desired symbol group from the list. Here are the ones you'll use most often.

· Symbol. Greek alphabet, mathematical symbols, all kinds of arrows, trademark, copyright sign, etc.

· Plain text. Vowels with accent marks and other special characters, currency symbols, paragraph marks, etc.

· Wingdings. Pictures depicting watches, envelopes, telephones, etc.

To insert a symbol, double-click the left mouse button on it. You can also highlight a character and then click OK.

Click the button Cancel to close the dialog without inserting a character. Click the button Close to close the window after inserting one or more characters.

Laboratory work No. 3

Columns and lists

Columns are commonly used in newspaper articles, brochures, and similar documents. Lines of text in columns are shorter than usual, they are easier to read, and columns provide great flexibility when formatting a document with pictures, tables, etc. Word makes it easy to use columns in a document. In Fig. Figure 1 shows the article formatted in two columns.

The columns you'll create with Word are newspaper-style columns, meaning the text on the last line of one column continues on the first line of the next column on the page. In documents where column rows must appear side by side, use tables.

When you define a column split for the selected text, it will be split into multiple columns. Word inserts section break lines before and after the selected text. If you have not selected the text in advance, the entire document will be divided into columns. But if your document is divided into sections, the columns will only apply to the text in the current section.

Rice. 1. A document divided into two columns.

Creating Columns

Word has four predefined column creation modes.

ü Two columns of equal width.

ü Three columns of equal width.

ü Two columns of unequal width, with the wider column on the left.

ü Two columns of unequal width, with the wider column located on the right.

You can apply any kind of column formatting to the entire document, to the current section, to selected text, or to text from the current cursor position to the end of the document. To do this, do the following.

1. If you want to divide only part of the document into columns, select the text that will fall into the columns, or place the cursor at the position from which the division into columns will begin.

2. On the tab Page layout in Group Page settings click the button Columns and in the menu that appears, select the required number of columns (Fig. 2).

Rice. 2. Selecting the number of text columns

3. The selected text will be formatted in the selected number of columns with equal spaces between them.

It should be noted that when a document fragment is formatted as multicolumn text, section breaks are automatically inserted into the document, and this fragment becomes a section of the document. This should be taken into account when subsequently working with the document.

Convert multi-column text to single-column text

To turn multi-column text into single-column text.

1. Place the cursor anywhere in this text.

2. On the tab Page layout in Group Page settings click the button Columns.

3. In the menu that appears (Fig. 2), select the option One.

4. Click the button OK.

Setting the number of columns

You can set an arbitrary number of columns.

1. Place the cursor anywhere in the document.

2. In the tab Page layout in Group Page settings click the button Columns and in the menu that appears, select the command Other speakers(Fig. 2).

3. Set the required value in the counter Number of columns(Fig. 3).

Rice. 3. Selecting the number of text columns

The maximum theoretically permissible number of text columns to be created is 45. However, with commonly used page parameters and font sizes, the number of columns does not exceed 10-12. In addition, it should be borne in mind that with a large number of columns, their width becomes very small, which makes such text difficult to read.

4. Using the field dropdown Apply specify which part of the document to apply column division to.

To the entire document. This is only possible if the document is not divided into sections.

To this section. This is only possible if the document is divided into sections.

Until the end of the document. Word inserts a section break line in place of the current cursor position and applies a column break to the last section of the document.

5. To make multi-column text easier to read when there is a small gap between columns, you can install a column separator. This can be done both when creating and after creating multi-column text. Check the box Delimiter to display a vertical line between columns (like in a newspaper).

Rice. 4. Installing a column separator

The separator is a vertical black bar approximately 0.75 pt thick (Fig. 1). The color and thickness of the separator cannot be changed.

6. Click the button OK.

Setting column widths and spaces between them

In all cases, except for selecting parameters Left And On right, by default all columns are created the same width. The gap between them is 1.25 cm.

You can set arbitrary widths of columns and spaces between them. This can be done both when creating and after creating multi-column text.

To do this, do the following.

1. Place the cursor anywhere in the document.

2. On the tab Page layout in Group Page settings click the button Columns and in the menu that appears, select the command Other speakers(Fig. 2).

3. To change the width of all columns and the spaces between them in the window at once Columns enter the required data in the text fields width or interval(Fig. 5) (or click on the corresponding arrows next to the fields). Checkbox columns of the same width must be installed.

Rice. 5. Changing the width of all columns and the spaces between them

4. To arbitrarily change the width of each column and each space between them in the window Columns uncheck the box columns of the same width and set the required values.

The total width of all columns and the spaces between them must be equal to the width of the active part of the page (the width of the page minus the sizes of the left and right margins).

5. In the area Sample you will see how the changed columns will look.

6. Click the button OK.

Ü Exercise

1. Copy from folderH:\documents\Office\Lab files file to your personal folder Document to be divided into columns.

2. Open this document in Word.

3. Divide the text of paragraphs 1 and 2 (ignore the heading) into 2 columns of equal width.

4. Divide the text of the 3rd paragraph into 3 columns of equal width with a separator between them.

5. Change the number of columns from three to two and set the gap between them to 3 cm.

6. Save the received document in your personal folder under the name Document with columns.

7. Convert text with columns to plain text.

8. Close the document you were working on.

By showing volume, frequency, and panning visually, you can show how each device affects the image of the sound by placing it in the space between the speakers. The three main sound parameters correspond to the coordinate axes: X, Y, Z.

Fig.8. Sound visualization: X, Y, Z axes.

Panorama from left to right.

Panorama, i.e. The left (right) location of the sound between the speakers is visually shown as a left-to-right arrangement.

Fig.9. Panorama: position from left to right.

Sounds that are closer to us are louder, while sounds that are closer to us are quieter and softer, so the volume of a sound in a mix can be shown as foreground to background (closer to farther).

As you may have noticed in mixes, some sounds are brought to the foreground (usually the vocals or lead instrument), while others (strings, backing vocals) remain in the background. If you want to highlight a particular sound in a mix, the first thing you can do is pull up the corresponding fader on the mixer. By lowering the volume of the sound, you, accordingly, push it into the background.

Although volume is the primary function for bringing sounds closer, there are also other devices or factors that make sounds appear closer, such as compressors; equalizers, in the “presense” range maximum gain mode; short (less than 30 milliseconds) delays; in general, any effect that makes the sound “stick out.”

Reverbs and long delays make sounds seem more distant. These effects are discussed in Chapter 4, “Studio Equipment Functions and Visual Representation of All Parameters.”

WARNING: You must use other tools such as delays and reverbs to calibrate your distance from the sound source. If you ever happen to be in an anechoic test chamber (a room where the walls absorb all sound so that there are absolutely no reflections), you won't be able to tell the distance to the sound source based on volume alone. However, for the purposes of this book, volume is shown from foreground to background. So the louder the sound, the more foreground it is shown.

Pitch: top and bottom.

There is an interesting illusion that happens with high and low frequencies in the world of images. Test it on your own system. Play some recording and listen to where high- and low-sounding sounds are located relative to the speakers. Instruments such as bells, cymbals, and high-pitched strings always seem to be much higher between the speakers of instruments such as bass guitars, bass drums, and tambourines.

Rice. 11. Frequencies: Bottom up.

There are several reasons for this illusion. First, low frequencies travel across the floor to your feet, but high frequencies do not. With this in mind, professional studios are always precisely calibrated regarding how much low frequency will be transmitted to you through the floor and legs. (And this is the reason some engineers work barefoot!)

On a more esoteric level, there is a theory in the field of music psychology that places frequencies from the bottom up of the human body, starting from the bottom of the belly to the top of the head.

Rice. 12. Frequencies within us.

In this book we will not challenge the validity of such systems; be that as it may, it contributes to our perception of high and low frequencies in the world of images. Regardless of why this happens, high-pitched sounds appear to be positioned higher than low-pitched sounds, which is how we will place them in our images.

Fig 13. Song with high and low frequencies highlighted.

You can raise or lower the sound by changing the pitch with harmonic processors and ixiters, or by having musicians do modulation. Since an equalizer controls the volume of certain frequencies, using it we can move the sound up and down...at least a little. On the other hand, no matter how much low end you add to a piccolo flute part, it will never make the floor vibrate or the bass guitar will ever soar to the skies.

Determination of the boundaries of a 3-dimensional stereo space of sound images.

Think about this: the sound image is never to the left of the left speaker and to the right of the right, right? Well, otherwise the room would seem strange.

Since the exact location is a figment of your imagination, different people have different ideas about left and right boundaries. Some people say that the sound cannot be to the left or right of the speakers. And some find that the sound may be a little, an inch or two, to the left and right of the speakers. Test yourself. Pan the sound as far to the left as possible and listen to where its image is. The left and right boundaries of the imaginary space are shown here:

Rice. 14. Left and right boundaries of space.

When you turn the pan knob, you move the sound from left to right between the speakers. What about the depth (front and back) of volume then?

Typically, the backing vocals and strings are placed a few inches behind the speakers. When you reduce the volume of the sound, it seems as if the distance between you increases. Let’s now try to answer the question: “How far will the sound be behind the speakers before it completely disappears?”

Most people feel that the sound is anywhere from 6 inches to two feet behind the speakers, depending on their size. It's interesting to note how the size of the speakers affects this illusion. If we have a boom box, we usually don't hear sound more than a few inches behind the speakers.

Rice. 15. Limits of boom box space.

And when we listen to large concert PA systems, sometimes the sound seems to be more than 6 feet behind the speakers.

Rice. 16. Limits of concert acoustics space.

Check how far away the sound can be behind different speakers. This is usually a fairly short distance.

NOTE: That some sounds may be beyond the limits of imagination is a psychoacoustic phenomenon. For example, if you place the sound of distant thunder between speakers, it can appear miles away, miles behind the speakers. The reverb sound of the Grand Coliseum or the echo of the Grand Canyon may also be far behind the speakers. This is a good example for creating entire sound worlds.

So, according to the previous remarks, when you turn on the sound, it appears in the space in front of you. But how far ahead can we push it? First, no matter how loud we make the sound, we will not be able to move it behind us. In fact, sounds rarely appear to us more than a short distance in front of the speakers. Most people find this distance to be between 3 inches and 1 foot in front of the speakers. Again, this distance depends on the size of the speakers. The loudest sound from a boom box may not be more than 2 inches away, while the loudest sound from a large speaker system may be 6 to 10 feet in front of the speakers (check your own systems).

Regardless of our perception of the exact boundaries of imaginative space, we can easily imagine exactly where the sound is located - in front or behind, and volume is a decisive factor in this. Thus, a normal stereo field is actually three-dimensional! In the pictures we show only the far boundaries of the imagination space.

Rice. 17. Far and near boundaries of space.

Finally, what about the top and bottom boundaries of the space? As discussed earlier, higher pitched sounds appear to be positioned higher than lower pitched ones. The question is how much higher? And where is the upper limit of the audible range between the speakers? Some people say they can't hear sounds above the actual speaker placement. Some say that the sound floats several inches above the speakers. Again, the upper limit depends on the size of the speakers and the listener's imagination. Regardless of the exact limit, the sound never goes beyond the ceiling. The field of imagination is limited somewhere around the top of the speakers. Now, what about the lower limit? Low frequencies usually travel through the floor to your feet. So gender is the lower limit. The upper and lower bounds are shown here:

Rice. 18. Upper and lower boundaries of the imagination field.

No matter how far left we pan the sound, it never feels like it's positioned much to the left of the left speaker. The same goes for the right side. Sounds may be slightly ahead or behind the speakers. We never place the sound above the speakers, but it comes to us through the floor.

The limits of sound representation space can be shown like this:

Rice. 19. Natural boundaries of the mix layout.

This is where the mix is ​​located. In the world of imagination, sounds are never located outside the room. It is especially important to discover that this space is limited.

So, if you listen to a large orchestra of 100 musicians, the sound fills that entire space.

Rice. 20. A large orchestra fills the space between the speakers.

You can't hear every violin in such an orchestra, you hear entire violin sections. Conversely, if you only have three violins, you will hear each of them quite clearly.

Fig.21. Violins with enough space between them.

Since the space between speakers is limited, and overlap of sounds is the main problem of the mix, the main goal of mixing becomes... space control!

As you can imagine, we can move the sound in the space between the speakers by changing the volume, panorama, and pitch (the equalizer has a small effect). These same three parameters are used not only to move sounds, but also to place and move effects such as delays, flangers and reverbs.

Rice. 22. Moving the sound using Volume, Panning, Equalization.

This limited space between the speakers is the stage or palette where we can create different mix structures. The trick is to creatively arrange the sound patterns.

Now let's discuss the elements, instrument sounds and effects that we will be placing between the speakers.

What will we do with the received material:

If this material was useful to you, you can save it to your page on social networks:

Tweet

All topics in this section:

All aspects of a recorded piece of music
Rice. 3. Eleven Aspects of a Recorded Musical Piece When

Aspect 1. Concept or theme
A concept can be defined as a combination of ten other components: It is also known as “mood”, “flow”, “aura”, depending on your definition. The concept is usually defined as

Aspect 2. Melody
Melodic line comments are especially dangerous. Comments like: “The melody is just not good” - nullify the creative process, destroying your relationship with the performer. The truth is

Aspect 3. Rhythm
If you know a lot about the complexity of rhythms, you can make assumptions accordingly. There are entire areas of rhythm that are studied in music theory. Be that as it may, even if you don't know

Aspect 4. Harmony
If you can arrange a harmony, the performer will most likely think you are a god if you can perform it. Even if you don't know anything about chord structure, inversions, voicing

Aspect 5. Words
Trying to tell someone that their writing is bad can have serious consequences for your health. A surprising number of hits have pretty dumb lyrics. However, I recommend being especially

Aspect 6. Arrangement
The term "arrangement" is used to indicate the density of the arrangement, i.e. the number of sounds in a song at any given moment, including the number of sounds in each frequency band. Main

Aspect 7. Instrumentation
As an engineer, you are responsible for making sure every instrument sounds good, even if the band members chose them themselves. If there is something wrong with the sound of the instrument, you can, of course, try to do everything possible

Aspect 8. Song Structure
Structure refers to the order and length of the parts of a song (intro, verse, chorus, break, transition, improvised accompaniment). As an engineer, in general you won't be able to say much about the structure.

Aspect 9. Execution
The sound engineer - whether he is producing the project or not - is often responsible for the accuracy and purity of the performance. There are five main aspects of execution that an engineer must

Section A
A physical representation of sound waves and the imaginary arrangement of sounds between speakers. Our relationship to sound is twofold: we feel (hear) sound

Visual representation of sounds
How big is each sound in this world of images? Our goal is to show how much space each sound takes up in the space between the speakers, so here

Musical style
Most bands that go into the studio want the mix to sound like the music they're playing. For some bands and some styles the rules are quite strict. For example,

The song and all its elements
Sometimes it's obvious that a mix needs to be done in a certain style. But more often than not, engineers (and the band) forget to check that the mix matches the song and all its elements. Such as: con

Volume control
FADERS Faders control the volume of every sound in the mix, including effects. Setting a specific volume level for each sound is based on its relationship to other sounds.

Sound image stabilization: more presence
After several years of fighting noise with compressors, people have also discovered that the sound, when processed by a compressor, also becomes more close, “present”. Lowering the level of p

Shortening the duration of the sound
You can also use a noise gate to shorten the sound. A noise gate cuts off both the attack and release of sound due to the fact that these are usually the quietest parts of the sound. All this leads to an unusual effect.

Equalizers
EQ (equalization) is a change in the volume of certain frequencies, similar to how the “high” and “low” knobs work on stereo players. This is the hardest work

Types of equalizers
There are three main types of equalizers used in the studio: graphic, parametric and cut (high and low pass filters). Graphic. Gromkos

Lower Mids (Oohzone): 200 to 800 Hz
If the sound in this range is too loud, it becomes especially muddy and unclear, and leads to rapid listening fatigue. You may hear something like: “Just mix

Harmonic structure of sound
Experts cannot come to a consensus on how different frequencies affect our psyche, and this fact can be understood by knowing the individual nature of the perception of sounds. Psychologists and philosophers have written a lot

When to Equalize
There are five times when you can use an equalizer during a recording session. In the first case, each sound is equalized individually during recording on a multi-track tape recorder. Second

Common terminology for equalization techniques
Even if you have learned all the frequencies; understood how to cut and raise frequencies depending on different instruments; and became a master of equalizing the sound of instruments depending on different types

Panning knobs and stereo placement
When mixing, you use the pan (balance) knobs to place the sound to the right or left between the speakers. The pan knob contains, in effect, two g knobs.

Temporal (time-based) effects
DELAYS After many unsuccessful attempts to use tennis courts to create delays, engineers were able to create a delay using a tape recorder. You could hear the delay when recording with

Various delay times
Now let's outline specific delay intervals so that they can be remembered. More than 100 milliseconds. Professional engineers call this interval "

Level 2 Impact: Volume Setting Patterns
Compared to the individual volume level of instruments, the combined

Level 3 Impact: Volume Changes
During the song, its volume changes: from quiet to loud, just like that

Compressors/limiters
Just like volume faders, compressors/limiters have an impact on music and songs. Compressors/limiters are often used for technical reasons, such as to get better ratio

Impact of equalization
If you've been involved in recording for a long time, you understand that the boundaries

EQ dynamics
Level 1 impact. – Individual EQ placement and relative settings.

Mixing styles
So we discussed with you the levels of impact that can be created by four tools in the studio - volume, equalizers, panning and effects. When you use it all

Mixing process
Different engineers have different procedures for this. Below is a process to help you build your mix effectively. EQ each instrument individually

Mix map
Use a mix map to make it easier to remember multiple moves (

Almost any site cannot do without blocks of streaming elements, such as: a list of news, products, gallery photos. Such elements are mainly output by the template engine in a loop, occupying an equal number of columns and an unexpected number of lines. If such elements move to the second line, then vertical spaces must be provided between them so that they do not shrink. Even if the designer has drawn only one row on the layout for beauty, the layout must necessarily provide for an increase in the number of such elements

The task seems to be as simple as shelling pears, what can we even talk about. But let’s take a closer look at how to solve this problem, since there are pitfalls.

Indentation for each element

Let's imagine that our markup is like this:
But the problem here is that the parent block itself will deviate from the lower ones by 20px, it will not be isolated from the external environment, and will affect the geometry of neighboring blocks. It will be difficult to transfer it to other places on the site or to other projects. In short, the gallery block will not be independent.

As a result, we need to get something like table padding, where they are applied only inside the table and do not extend outside.

We make a vertical indent for each element and a negative vertical indent of the same size for the parent.
.gallery( margin-top: -20px ) .gallery__image( margin-top: 20px )
Everything seems to be fine, but the block, if an interactive element, for example a link, falls into the area that the block overlaps, then the block will block it. These are the links that hovering on the screen will not work.


You can get out of this situation. You need to wrap the gallery block in another block, set it to overflow: hidden and it will cut off all the overflow.
.gallery( overflow: hidden; ) .gallery__inner( margin-top: -20px ) .gallery__image( margin-top: 20px )
But here another problem arises. All overflow is cut off, which limits a lot of design decisions. For example, a block shadow when hovering over a photo, labels that can stick out behind an element, for example, a “Best Seller” label for a product. Also, when you hover over an element, a drop-down block with detailed information may appear, and so on.

Indentation for each element except the first n

Ideally, you need to specify a top margin for all elements except the first row. This can be done using the nth-child pseudo-class

But if you specify it statically, then the solution will not be flexible and with a change in the number of columns it will be necessary to change the rules, and this is not only inconvenient, but completely unsuitable given the changes in columns during media queries.

But when using preprocessors, such a solution can be made flexible, which is what I actually want to demonstrate to you. I took the Bootstrap grid as a basis, that is, each photo in the gallery is placed in a grid column. I used Sass as a preprocessor. But this approach can be safely applied to other grids and preprocessors.

Let me remind you that columns in a bootstrap grid are written by the following classes:
col-xs-*
col-sm-*
col-md-*
col-lg-*

Let's imagine that our gallery is enclosed in 3 columns on medium screen sizes, that is, col-md-4. For versatility, we will make indents for grid columns that have the row-vertical-indent modifier assigned.

Now we write Sass styles
.row-vertical-indent( & > :nth-child(n+4)( padding-top: 20px; ) )
As a result, all elements starting from the 4th will have an indentation at the top. The first 3 will be without indents.

Let's now expand the possibilities and provide any number of columns on medium-sized screens
.row-vertical-indent( @for $i from 1 through $grid-columns( $nth-element: floor(($grid-columns / $i) + 1); & > :nth-child(n+#($ nth-element)) ( padding-top: 20px; ) ) )
The $grid-columns variable is an internal bootstrap variable that is assigned the number of grid columns. Default is 12.

We loop through all possible numbers of columns and assign indents to those elements that do not fit into 12 columns, and accordingly move to the second row.

But we also don’t know how many columns there will be for other breakpoints, so we need to go through all the options for media queries.

We create an object (I can’t get used to the terminology “map”) of media queries.
The key is the break point designation in the class name, that is, col-xs.., col-sm.., col-md…
The meaning is the media expressions themselves for each break point.
$break-points: ("xs": "(max-width: #($screen-xs-max))", "sm": "(min-width: #($screen-sm-min)) and ( max-width: #($screen-sm-max))", "md": "(min-width: #($screen-md-min)) and (max-width: #($screen-md-max ))", "lg": "(min-width: #($screen-lg-min))");
Then we go over this object and for each iteration we apply the previous construction, but for a specific media expression.
@each $key, $val in $break-points( @media #($val)( @for $i from 1 through $grid-columns( $nth-element: floor(($grid-columns / $i) + 1); & > :nth-child(n+#($nth-element))( padding-top: $gutter; ) ) ) )
Don’t forget to write the value of the object key in the name of the selectors instead of md. #($key)

As a result, we get the following mixin, which can be used to expand the capabilities of the bootstrap grid.
@mixin grid-vetical-gutter($gutter)( $break-points: ("xs": "(max-width: #($screen-xs-max)) ", "sm": "(min-width: #($screen-sm-min)) and (max-width: #($screen-sm-max))", "md": "(min-width: #($screen-md-min)) and ( max-width: #($screen-md-max))", "lg": "(min-width: #($screen-lg-min))"); @each $key, $val in $break- points( @media #($val)( @for $i from 1 through $grid-columns( $nth-element: floor(($grid-columns / $i) + 1); & > :nth-child(n+ #($nth-element))( padding-top: $gutter; ) ) ) ) )
Now for the desired class we simply call the mixin passing the indent
.row-vertical-indent( @include grid-vetical-gutter(20px) )

Limitations and disadvantages of this approach:

1 - Works correctly only for the same number of columns in a row.
That is, for a dynamic flow of columns that are displayed in a loop (product catalog, news, gallery, etc.).

For a static number of columns, for example, for the layout of the page itself, such a solution may not work correctly and, in principle, is not necessary, so as not to clog the compiled CSS code. In this case, it is even more convenient to add indentation in separate classes where necessary.

2 - It is necessary to indicate all break points for the column.
My solution does not provide a mobile first approach and styles will not be applied on a screen for which the number of columns is not specified.

In bootstrap, this entry means that there will be 3 columns for all sizes starting from sm.
But when using vertical indents, the number of columns must be specified for all sizes, that is, the entry will look like this