FDMG CSS Grid with Flexbox fallback
npm install @fdmediagroep/css-grid!Build
!Publish
!CodeQL
FDMG CSS Grid with Flexbox fallback. Gap-size is 1rem.
- npm i --save @fdmg/css-grid
Import both if you need FlexBox fallback otherwise only include the Grid.
- Grid: import '@fdmg/css-grid/css/grid.css';
- FlexBox: import '@fdmg/css-grid/css/flex.css';
To maximize accessabilty there is no default (font) size set as we want to use the browsers' default default size.
Setting the root font-size in your project to 62.5% will result in 1rem = 10px. Then define your font-size for your
project (i.e.) as 1.6rem for 16px. This will ensure proper scaling of units.
``html`
Takes full width regardless of screen width
`html`
Takes full width regardless of screen width and adds a gap below
Place below previous column
In case your browser doesn't support CSS Grid you may still want to have a gap between the columns. In the example below
you can see gap-3 is added as CSS class. With this you're telling the Grid that there are 3 gaps in the widest view.
It will know what to do when the screen becomes smaller and the responsive system kicks in.
`html`
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
`html`
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
1/4th on xl, 1/3 on l, 1/2 on m and full width on smaller
Note that we declare a gap-3 which is used when 4 columns are shown next to each other. gap-2 will start its
override when the last column turns full width.
`html`
1/4th on xl, 1/3 on l, m and s and full width on smaller
1/4th on xl, 1/3 on l, m and s and full width on smaller
1/4th on xl, 1/3 on l, m and s and full width on smaller
1/4th on xl, full width on smaller
- Note: the gap CSS classes are only necessary when using the FlexBox fallback.
You can show/hide elements for their respective screensizes using xs-hide, xs-show, s-hide and s-show etc.xs-hide
Special case , hide-lt-m etc. will hide only for screen sizes with a max-width of XS, M etc. So it will not affect other screen sizes.
For instance:
`html`
...Will still show on screens larger than XS
...
All other show/hide classes are calculated through min-width so will affect larger screen sizes.
For instance:
`html`
...Will not show on screens larger than XS
Will not show on screens larger than XS and smaller than XL
Will not show on screens larger than XS and smaller than L
...
There is a paddings/margins system in place which allows you to use fixed CSS classes to apply paddings/margins to elements. The naming convention is as follows .+0.25rem
Each increment is . So if is 0.25rem then is 0.5rem and is -0.25rem.
Example:
`htmlsets margin to 0 for device sizes xs and up
$3
Paddings can't have negative values.
- 0
- -1/+1
- -2/+2
- -3/+3
- -4/+4
- -5/+5
- -6/+6
- -7/+7
- -8/+8
$3
- p: all paddings
- pt: padding top
- pr: padding right
- pb: padding bottom
- pl: padding left
- m: all margins
- mt: margin top
- mr: margin right
- mb: margin bottom
- ml: margin left
Known issues
There are many issues regarding the FlexBox fallback. It does not mirror all features available with CSS Grid.
One of such issues is the gap. When you want to implement a more advanced responsive layout I.e. 4 columns becomes
3 columns or even less and you want to hide the extraneous column then the gap space will not be shown correctly.
$3
1.
1.
- The demo will run on $3
1.