Pure CSS – Grid System:
The grid system was developed as responsive and targeted to fit for mobile. You can still customize the grid by mentioning the grid class names and media query breakpoints.
Below is the link you can use for responsive grids.
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> Default Breakpoints in grids-responsive.css
Class Name | Functionality |
| .pure-u-* | This class will occupy the available space on the device. |
| .pure-u-sm-* | This class can be used for small devices with =568px size and media query it uses is @media screen and (min-width: 35.5em) |
| .pure-u-md-* | This class can be used for medium devices with = 768px size and media query it uses is @media screen and (min-width: 35.5em) |
| .pure-u-lg-* | This class can be used for Large devices with = 1024px size and media query it uses is @media screen and (min-width: 35.5em) |
| .pure-u-xl-* | This class can be used for Extra Large devices with = 1280px size and media query it uses is @media screen and (min-width: 35.5em) |