1

Tenho o seguinte exemplo mas em porcentagem:

$grid__cols: 12;
@for $i from 1 through $grid__cols {
  .col-#{$i} {
    flex-basis: (100 / ($grid__cols / $i) ) * 1%;
  }
}

Que pode ser testado aqui, para gerar o CSS automaticamente.

Como eu poderia aplicar a mesma regra em pixel só que respeitando as 12 colunas com as mediadas exatas do grid de 76.7px / 12px até um total da largura 1272px?

Exemplo de grid:

inserir a descrição da imagem aqui

1 Resposta 1

4

Essa fórmula vai fazer a progressão das colunas em PX até 1272px

$grid__cols: 12;
@for $i from 1 through $grid__cols {
  .col-#{$i} {
    flex-basis: (1272 / ($grid__cols / $i) ) * 1px;
  }
}

OUTPUT

.col-1 {
  flex-basis: 106px;
}
.col-2 {
  flex-basis: 212px;
}
.col-3 {
  flex-basis: 318px;
}
.col-4 {
  flex-basis: 424px;
}
.col-5 {
  flex-basis: 530px;
}
.col-6 {
  flex-basis: 636px;
}
.col-7 {
  flex-basis: 742px;
}
.col-8 {
  flex-basis: 848px;
}
.col-9 {
  flex-basis: 954px;
}
.col-10 {
  flex-basis: 1060px;
}
.col-11 {
  flex-basis: 1166px;
}
.col-12 {
  flex-basis: 1272px;
}

E essa formula vai criar 12 colunas de 76.7px, o que não faze sentido algum, pq vc iria querer uma classe com col-12, mas que tem a mesma largura em px da col-6 O.o

$grid__cols: 12;
@for $i from 1 through $grid__cols {
  .col-#{$i} {
    flex-basis: 76.7px;
  }
}

OUTPUT

.col-1 {
  flex-basis: 76.7px;
}
.col-2 {
  flex-basis: 76.7px;
}
.col-3 {
  flex-basis: 76.7px;
}
.col-4 {
  flex-basis: 76.7px;
}
.col-5 {
  flex-basis: 76.7px;
}
.col-6 {
  flex-basis: 76.7px;
}
.col-7 {
  flex-basis: 76.7px;
}
.col-8 {
  flex-basis: 76.7px;
}
.col-9 {
  flex-basis: 76.7px;
}
.col-10 {
  flex-basis: 76.7px;
}
.col-11 {
  flex-basis: 76.7px;
}
.col-12 {
  flex-basis: 76.7px;
}
3
  • 1
    Perfeito, era isso mesmo que eu queria! Commented 31/07/2020 às 12:01
  • @IvanFerrer legal que ajudou, mas estou atualizando a resposta, ela tinha um erro na primeira fórmula que usei na resposta, antes a col-6 da primeira fórmula não tinha 1/2 do total da largura do Grid, ou seja, não era 636px (1272 / 2). Mas agora está certinho!
    – hugocsl
    Commented 31/07/2020 às 16:19
  • Obrigado, excelente! Commented 3/08/2020 às 20:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .