Create 3x4 Columns in Responsive Wordpress Template?

Question

css

Hello guys! ))) Tell me please)
- how can I add the already existing 3 columns in the 4th WordPress template?
- the number of columns is regulated only by means of css?
Post section php code with columns:

<?php endif; ?>
  <?php if ( have_posts() ) : ?>
    <div id="posts-wrapper">
    <?php while ( have_posts() ) : the_post(); ?>
      <?php get_template_part( 'format', get_post_format() ); ?>
    <?php endwhile; ?>
    </div>
    <div id="gutter-sizer"></div>

And css code:

#gutter-sizer {
  width: 0;
  height: 0;
  box-sizing: content-box; }
  @media screen and (min-width: 800px) {
    #gutter-sizer {
      width: 2.5%; }
      [data-layout="sticky-column"] #gutter-sizer {
        width: 3% !important; } }

#posts-wrapper {
  position: relative;
  box-sizing: content-box; }
  #posts-wrapper .masonry-post {
    background-color: #fff;
    margin-bottom: 30px;
    padding: 30px;
    padding: 3rem; }
    #posts-wrapper .masonry-post:not(.unit) {
      width: 100%; }
    @media screen and (min-width: 800px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    @media screen and (min-width: 1100px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 31.66667%; } }
    @media screen and (min-width: 800px) {
      [data-layout="2-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    body:not(.has-background) #posts-wrapper .masonry-post {
      border: 1px solid #c2c2c2; }

@media screen and (min-width: 800px) {
  [data-layout="sticky-column"] #posts-wrapper .masonry-post {
    width: 31.66667%; } }
@media screen and (min-width: 1100px) {
  [data-layout="sticky-column"] #posts-wrapper .sticky.masonry-post:first-of-type {
    width: 65.83% !important; } }

Answer 1

Without affecting php / html decided in css next. way:

#gutter-sizer {
  width: 0;
  height: 0;
  box-sizing: content-box; }
@media screen and (min-width: 480px) {
    #gutter-sizer {
      width: 2.1%; }
      [data-layout="sticky-column"] #gutter-sizer {
        width: 3% !important; } }

#posts-wrapper {
  top: 30px;
  top: 3rem;
  bottom: 30px;
  bottom: 3rem;
  position: relative;
  box-sizing: content-box;}
#posts-wrapper .masonry-post {
    background-color: #edf0dd;
    margin-bottom: 30px;
    padding: 30px;
    padding: 3rem; }
       #posts-wrapper .masonry-post:not(.unit) {
      width: 100%; }
    @media screen and (min-width: 480px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    @media screen and (min-width: 800px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 31.66667%; } }
    @media screen and (min-width: 1100px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 23.39877%; } }
    @media screen and (min-width: 480px) {
      [data-layout="2-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    body:not(.has-background) #posts-wrapper .masonry-post {
      border: 1px solid #edf0dd; }
31.66667
@media screen and (min-width: 480px) {
  [data-layout="sticky-column"] #posts-wrapper .masonry-post {
    width: 31.66667%; } }
@media screen and (min-width: 800px) {
  [data-layout="sticky-column"] #posts-wrapper .sticky.masonry-post:first-of-type {
    width: 65.83% !important; } }

Answer 2

- the number of columns is regulated only by means of css?

The number of columns per page depends on your html file.
Break your sheet separately into code, and separately into text, it is not convenient to read.