@fesjs/fes-design/es/grid/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import './mixin.less';

@row-prefix-cls: ~'@{cls-prefix}-grid';
@col-prefix-cls: ~'@{cls-prefix}-grid-item';

// Media queries breakpoints
@grid-columns: 24;
@screen-sm: 576px;
@screen-sm-min: @screen-sm;
@screen-md: 768px;
@screen-md-min: @screen-md;
@screen-lg: 992px;
@screen-lg-min: @screen-lg;
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;
@screen-xxxl: 2000px;
@screen-xxxl-min: @screen-xxxl;

.@{row-prefix-cls} {
    position: relative;
    display: flex;
    box-sizing: border-box;
}

.@{col-prefix-cls} {
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 1px;
}

.make-grid();
.make-grid(-xs);
@media (min-width: @screen-sm-min) {
    .make-grid(-sm);
}
@media (min-width: @screen-sm-min) {
    .make-grid(-sm);
}
@media (min-width: @screen-md-min) {
    .make-grid(-md);
}
@media (min-width: @screen-lg-min) {
    .make-grid(-lg);
}
@media (min-width: @screen-xl-min) {
    .make-grid(-xl);
}
@media (min-width: @screen-xxl-min) {
    .make-grid(-xxl);
}
@media (min-width: @screen-xxxl-min) {
    .make-grid(-xxxl);
}