Geek Answers Handbook

What do push / pull classes do in a grid?

When I look at a lot of CSS systems and frameworks, they usually have a standard percentage-width column and row setting. Something like this, for example:

standard grid column:

.col-10 { width: 83.33333%; width: calc(100% / 12 * 10); width: -webkit-calc(100% / 12 * 10); width: -moz-calc(100% / 12 * 10); }

However, in addition to this, I often see other classes such as .push or .pull . For example, for example:

push / pull classes:

 .push-10 { left: 83.33333%; left: calc(100% / 12 * 10); left: -webkit-calc(100% / 12 * 10); left: -moz-calc(100% / 12 * 10); } .pull-10 { left: -83.33333%; left: calc(-100% / 12 * 10); left: -webkit-calc(-100% / 12 * 10); left: -moz-calc(-100% / 12 * 10); }

I used mesh systems quite often, but I never had to use these classes. Probably because I don’t know what they are doing. So my questions are:

  • What does the push class usually do?
  • What does the pull class usually do?
  • When do you want to use each of them?
  • How do you use each of them?
  • Provide an example script for demonstration.
+6
source share
1 answer

They are designed to reorder content. Say you want your content to appear first in the HTML markup and then in the sidebar, but you want the sidebar to be first on the display (left) and then the content to be second (right).

Using Bootstrap as an example:

 <div class="row"> <div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div> <div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div> </div>

col-sm-push-3 means moving the column 25% to the left ( left: 25% ).

col-sm-pull-9 means moving the column 75% to the right ( right: 75% ).

So, in this case, the large column “pushed” the width of the small column, and the small column “pulled” the width of the large column.

Demo using Bootstrap

Something like that:

 .push-10 { left: calc(100% / 12 * 10); }

So, take the width of the container (100%), divide it by the number of columns in the grid (12) and several by the number you want to click on it (10). Leaving you with 83.33333333%.

+8
source

More articles:


All Articles