How can I master CSS positioning

CSS Positioning: Grid Systems

Lines and columns with CSS

Grid systems are CSS packs that simplify a line- and column-oriented layout. Grid systems typically have 12 to 16 columns and a simple assignment of CSS classes is enough to create complex responsive layouts. The grid system takes care of all the nooks and crannies of the browser.

With the traditional column layout, the entire navigation on small monitors slides under the content and then quickly appears incoherent.

The grid of a grid system with the possibility of arranging the cells of the grid at the breakpoints can loosen up the content and at the same time keep suitable content together.

Website layout: trends

CSS Flexbox - display: flex is a modern and stable approach to the layout of websites: elegant and efficient.

display: flex is supported by all modern browsers, in IE10 however only with a browser prefix and an outdated syntax, but IE10 is no longer supported by Microsoft and is hardly on the plan.

display: grid is another approach to positioning and aligning blocks. CSS Grid is now also supported by all modern browsers, but only to a limited extent by IE11 and older versions of EDGE and with a browser prefix. On October 18, 2017, Microsoft announced that the fall version of EDGE would migrate to the current version of CSS GRID, but IE11 will remain in support for a long time (CSS Grid update).

Positioning: rows and columns

Each grid system has its own individual syntax, but the basic concept is the same for all grid systems.

The traditional grid systems based on CSS float had their downsides: the rows and columns require additional - non-semantic - HTML markup. A modern grid system relies on display: flex or display: grid.

The big frameworks like Foundation and Bootstrap (in the mini version 141 KB!) Always bring a grid system with them. Those who shy away from the overwhelming frameworks (stop (ab) using Bootstrap / foundation) can fall back on smaller grid systems.

  • Basscss / Low-level CSS toolkit Modern CSS: modular, simple and efficient.
  • Responsive Grid System. The entire CSS package does not have to be loaded here, but when it is clear that 3 or 4 columns are sufficient for the layout, the grid generator prepares the CSS.
    So small, but already offers columns of the same height - but jQuery must be available for this.
  • SKELETON A dead simple, responsive boilerplate
    The complete documentation on one page - an excellent starting position.
  • Flexbox-Grid manages with less than 20 KB.
  • FROW Flexbox Toolkit & Grid

Features of grid systems

Most grid systems are flexible or responsive throughout. This means that text is also broken every time the browser window is changed.

If a grid system is capable of "folding", the blocks can be rearranged for medium-sized and large monitors. E.g.

  • On large monitors 4 blocks in one row, on medium-sized monitors 2 blocks in two rows.
  • 6 blocks in one row on large monitors, 3 blocks in two rows on medium-sized monitors, 2 blocks in three rows on small monitors.

An upgraded grid system can nest rows in columns.

Grid systems that master all delicacies are rare. We only find the most comfortable grid systems in the large frameworks such as Bootstrap and Foundation, but there you have to reckon with large CSS files and heavy use of JavaScript and jQuery.

Position columns

CSS gives us float, display: inline block, display-table and display-flex for a column-oriented web design.

Before display: flex and display: grid was CSS float the most handy method. Before CSS box-sizing and CSS calc hit the scene, a column-oriented design on a percentage basis was hard work with constant nail biting and nightmares. That is why web designers rely on stable CSS frameworks with their grid systems, which are based on float and all of the rows are similarly divided into columns:

[class * = 'colspan'] {width: 100%; float: left; box-sizing: border-box} .col-1 {width: 16.66%} .col-2 {width: 33.33%} .col-3 {width: 50%} .col-4 {width: 66.664%} .col -5 {width: 83.33%} .col-6 {width: 100%}

[class * = 'colspan'] is an "almost" universal selector: All CSS classes whose name begins with 'colspan'.

Unlike these old grid systems, the modern CSS grids are with display: flex simple, efficient and stable. The learning curve for a line- and column-oriented layout without a flood of CSS classes and with semantic HTML is steep.

.flex-cell {margin-bottom: 1em; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media (min-width: 680px) {.flex-raster {display: flex; } .flex-cell {flex: 1; margin: 1em 0 0 1em;} .flex-cell: nth-child (1) {margin: 1em 0 0 0em;}}

display: grid could be even more elegant in many cases, but IE11 is opposed to a flexible CSS grid, which not only needs a browser prefix, but also listens to an old version of the standard in which functions are simply missing.

@media (min-width: 450px) {.simple-grid {display: -ms-grid; display: grid; -ms-grid-columns: repeat (12, 1fr); grid-template-columns: repeat (auto-fill, minmax (14em, 1fr)); grid-gap: 2vw; }}

External sources