'What is the standard CSS container size in 2018?

When designing a responsive layout, what size is the standard for using a max-width container in 2018? Currently I am using 1140px to fit the standard screen size of 1366px.

cssuser-interfaceresponsive-design


Solution 1:[1]

UPDATE 2022

here are my latest breakpoint/container recommendations based on today's global usage statistics:

$breakpoints: (
    xs: 0, 
    sm: 600px, // mobile landscape, tablet (portrait)
    md: 1024px, // chromebooks, ipad pro (portrait), tablet (landscape)
    lg: 1600px, // most laptops and desktops
    xl: 2048px // 2k and up
);

$container-max-width: (
    xs: 480px, 
    sm: 960px,
    md: 1280px, 
    lg: 1920px,
    xl: 3840px
);

PREVIOUS ANSWER

Based on usage statistics most common desktop resolutions are 1366 and 1920.

See usage stats: https://gs.statcounter.com/screen-resolution-stats

As such, I find that Bootstrap default breakpoints are too small and redefine containers as below.

$grid-breakpoints: (
    xs: 0,
    sm: 768px,
    md: 992px,
    lg: 1366px,
    xl: 1920px
);

$container-max-widths: (
    sm: 720px,
    md: 960px,
    lg: 1280px,
    xl: 1840px
);

EDIT: After further reflection these container max-widths are more proportional to the screen widths. This deviates more drastically from Bootstrap defaults, however.

$container-max-widths: (
    sm: 720px,
    md: 930px,
    lg: 1280px,
    xl: 1800px
);

Solution 2:[2]

Here are the material breakpoints:

https://material.io/guidelines/layout/responsive-ui.html

They use a variety of columns and breakpoints:

< 480 / 4 cols / xsmall
481 - 600 / 8 cols / xsmall
601 - 840 / 8 cols / small
841 - 960 / 12 cols / small
961 - 1280 / 12 cols / medium
1281 - 1440 / 12 cols / large
1441 - 1600 / 12 cols / large
1601 - 1920 / 12 cols / large (HD desktops)
> 1920 / 12 cols / large (Retina desktops)

Adaptive breakpoints in Material Design [img]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 John Brand

Related Questions