Вопросы Теги

Теория о системе решеток css

Я вижу видео на системе решеток в css, но я появляется сомнение, на уровне теории. В этих моментах, системе решеток, например система Foundation: он используется для того, чтобы использовать это с Css grid и flexbox или уже не необходим с модулями, которые я показал?

Спасибо!

3
задан 26.02.2018, 13:39
1 ответ

недавно я сформировался в SCSS одном pequeГ±o cГіdigo, чтобы производить систему решеток 12 колонн, основанный в flexbox, это, если ты не хочешь зависеть от framework.

HTML 

<div class="flex-container">
   <div class="flex-row">
      <div class="flex-col-sm-12 flex-col-md-6 flex-col-lg-2"></div>
      <div class="flex-col-sm-12 flex-col-md-6 flex-col-lg-2"></div>
      <div class="flex-col-sm-12 flex-col-md-12 flex-col-lg-8"></div>
   </div>
</div>

SCSS 

[class^='flex-col'] { width: 100%; }

$breakpoints: (
  xs: 540px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);

.flex-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;
}

@each $name, $value in $breakpoints {
  .flex-container {
    @media (min-width: $value) {
      max-width: $value;
    }
  }
  .flex-col-#{$name} {
    @for $i from 1 through 12 {
      &-#{$i} {
        box-sizing: border-box;
        padding: 1em;
        @media (min-width: $value) {
          width: calc(100% * (#{$i} / 12));
        }
      }
    }
  }
}

.flex-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

https://codepen.io/neoxsaibot/pen/yraZEd

, Если ты нуждаешься в CSS, ты можешь идти в этот Веб https://www.sassmeister.com / , чтобы конвертировать sass в css.

0
ответ дан 24.11.2019, 03:13

Теги

Похожие вопросы