How do you build a customized grid?

Question

css

Hello everyone,
There was an idea to create a normal adapted grid for the site (for 12 columns).
Now I use libraries as needed for the project (PureCSS, Bootstrap, Semantic, Foundation, etc.). Each has its pros and cons, it's not about that.
What is required is to clean up the HTML (get rid of any col/column/cols/etc.) on large projects, changes take a lot of time and support for many media requires additional classes. For example, the 4th Bootstrap, for example (xs, sm, md, kg, xl) and this is only 1200, there are also higher resolutions.
Basically I see 2 extremes:

1. the same principle as many frameworks today, for each screen its own class - the main problem is clogging HTML
   
2. a more conservative approach, assign a certain class to each block and set its own parameters in each screen - I don’t know how correct the approach is, it may work on a small project, but I doubt it on a big one
   

First option

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 1<</div>
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 2<</div>
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 3<</div>
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 4<</div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">Gallery Image 1<</div>
    <div class="col-xs-12 col-sm-6 col-md-4">Gallery Image 2<</div>
    <div class="col-xs-12 col-sm-6 col-md-4">Gallery Image 3<</div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6">Inner Link</div>
    <div class="col-xs-12 col-md-6">Inner Link</div>
  </div>
</div>

Second option

<div class="container">
  <div class="row">
    <div class="icon">Icon 1<</div>
    <div class="icon">Icon 2<</div>
    <div class="icon">Icon 3<</div>
    <div class="icon">Icon 4<</div>
  </div>
  <div class="row">
    <div class="gallery">Gallery Image 1<</div>
    <div class="gallery">Gallery Image 2<</div>
    <div class="gallery">Gallery Image 3<</div>
  </div>
  <div class="row">
    <div class="link">Inner Link</div>
    <div class="link">Inner Link</div>
  </div>
</div>

@media (min-width: 768px) {
   icon{width:100%;}
   gallery{width:100%;}
   link{width:100%;}
}
@media (min-width: 992px) {
   icon{width:25%;}
   gallery{width:33%;}
   link{width:50%;}
}

How do you type?

Answer 1

I use the Bootstrap grid, but I assign the bootstrap classes not in html, but in scss through extend, adhering to BEM. I don't see the point in reinventing the wheel. Bootstrap grid is by far the best.

.about{
  &__item{
    @extend .col-md-3;  
    @extend .col-sm-2;  
    @extend .col-xs-6;  
  }
}

Answer 2

Susy

Answer 3

I used the first option doing this: first indents, then screens starting from small, i.e.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 1<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 2<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 3<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 4<</div>
  </div>
</div>

But Serj-One does it more correctly in this regard and does not clog html (when I wrote a large project, I paid for using the grid directly in html). So read up on how to use bootstrap grid + sass (css preprocessor) and clean up your html!
On the off site in the docks for the alpha 4 version of bootstrap there is an example v4-alpha.getbootstrap.com/layout/grid