@itwin/itwinui-layouts-css
Version:
iTwinUI CSS package that provides classes for most common layouts
60 lines (58 loc) • 2.18 kB
CSS
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
.iui-layouts-grid{
--_iui-grid-column-count-mobile:12;
--_iui-grid-column-count-tablet:12;
--_iui-grid-column-count-small-monitor:12;
--_iui-grid-column-count-monitor:12;
display:grid;
grid-template-columns:repeat(var(--_iui-grid-column-count-monitor), 1fr);
grid-gap:var(--iui-size-l);
}
@media (max-width: 93.75rem){
.iui-layouts-grid{
grid-template-columns:repeat(var(--_iui-grid-column-count-small-monitor), 1fr);
grid-gap:var(--iui-size-l);
}
}
@media (max-width: 68.75rem){
.iui-layouts-grid{
grid-template-columns:repeat(var(--_iui-grid-column-count-tablet), 1fr);
grid-gap:var(--iui-size-m);
}
}
@media (max-width: 31.25rem){
.iui-layouts-grid{
grid-template-columns:repeat(var(--_iui-grid-column-count-mobile), 1fr);
grid-gap:var(--iui-size-m);
}
}
.iui-layouts-grid-item{
--_iui-grid-item-column-span-mobile:span 1;
--_iui-grid-item-column-span-tablet:span 1;
--_iui-grid-item-column-span-small-monitor:span 1;
--_iui-grid-item-column-span-monitor:span 1;
--_iui-grid-item-column-start-mobile:auto;
--_iui-grid-item-column-start-tablet:auto;
--_iui-grid-item-column-start-small-monitor:auto;
--_iui-grid-item-column-start-monitor:auto;
max-width:100%;
grid-column:var(--_iui-grid-item-column-start-monitor)/var(--_iui-grid-item-column-span-monitor);
}
@media (max-width: 93.75rem){
.iui-layouts-grid-item{
grid-column:var(--_iui-grid-item-column-start-small-monitor)/var(--_iui-grid-item-column-span-small-monitor);
}
}
@media (max-width: 68.75rem){
.iui-layouts-grid-item{
grid-column:var(--_iui-grid-item-column-start-tablet)/var(--_iui-grid-item-column-span-tablet);
}
}
@media (max-width: 31.25rem){
.iui-layouts-grid-item{
grid-column:var(--_iui-grid-item-column-start-mobile)/var(--_iui-grid-item-column-span-mobile);
}
}