Is it better to create a set of CSS classes for the grid or style each block of the site separately?

Question

css

I'm used to working with CSS frameworks, but now I need to do a couple of projects without them.
As always, a column grid is needed in some places.
There are two options:
1. Do the same as done in frameworks - create (or download a ready-made) set of common grid classes. Everything is standard - .row .columns etc.
Then use them throughout the project, layout as with a framework:

<div class="row">
    <div class="column large-12">
        <div class="top">
            content
        </div>
    </div>
</div>

<div class="row">
    <div class="column large-6">
        <div class="some-section">
            some content
        </div>
    </div>
    <div class="column large-6">
        <div class="information">
            some content
        </div>
    </div>
</div>

Etc. The entire layout is built on divs that define the grid and blocks with content are already drawn up inside.
The second option is to write "grid" rules for each block and build the markup like this:

<div class="top">
    Some content
</div>

<div class="block">
    <section class="block__element">
        some content
    </section>
    <section class="block__element">
        some content
    </section>
</div>

In this case, I don't have a common set of mesh classes. Therefore, each new block on the site in which you need to somehow arrange the elements is a duplication of CSS.
By duplication, I mean that you need to declare the parent display: flex (for example), the child elements also set styles that determine their position, width, etc.
Therefore, the larger the site, the more "custom" grids for each block.
In theory, this should not be a particular problem. 1 has mixins and 2 has gzip.
My question is: what is the right thing to do and how do good typesetters do it?

Answer 1

There is no single answer, both options are possible depending on the situation.
Practice shows that the first option is more often suitable for sites that are assembled from many bricks as a constructor and there are a lot of combinations of these bricks (for example, admin panels).
For sites with a more or less unique design, the second approach is often better, because well, there are no complex designs that could be completely described by 12 equal columns. Although under the hood there are still usually some elements of the first approach, only in the form of mixins.

Answer 2

I like this tool here:
https://m.youtube.com/playlist?list=PLyeqauxei6je2...

Answer 3

For the global grid (the relative position of large top-level blocks), you can create your own .container block , which will be the centerer, and mix it in the markup or make it a wrapper block (when there is a 100% background):

<div class="features  container">
    Some content
</div>

<div class="features">
    <div class="container">
      <section class="features__element">
          some content
      </section>
      <section class="features__element">
          some content
      </section>
    </div>
</div>

Then, grid blocks set rules for adaptability.

For example…

// Каскад от Мобильных к Десктопам

.container {
  width: 280px;
  padding: 0 20px; 
}

@media (min-width: 768px) {
  .container {
    width: 640px; 
    padding: 0 60px; 
  }
}

@media (min-width: 1200px) {
  .container {
    width: 960px; 
    padding: 0 100px; 
  }
}

Smaller grid blocks - columns, can be written in the file of a specific block, and if the arrangement of columns is often repeated, then as an element of the grid block.