Czy istnieje sposób na stworzenie mniejszej sumy, która oblicza siatkę, która dzieli dostępną przestrzeń? - mniej, układ siatki

Preferujemy siatki, które dzielą dostępną przestrzeń w następujący sposób:

• siatka-1 = 100%
• siatka-2 = 50%
• siatka-3 = 33,33333333%

Mamy mniejszą mieszankę, która działa świetnie, z tym wyjątkiem, że siatka-1 powinna wynosić 100%;

@column-gutter-width: 2%;

.grid {
margin-left: -@column-gutter-width;
.clearfix();

.generate-grid-units(@i) when (@i > 0){
.grid-@{i} {
width: (100% / @i) - @column-gutter-width;
margin-left: @column-gutter-width;
}
.generate-grid-units((@i - 1));
}
.generate-grid-units(6);
}

Generuje to następujące, gdzie jedyną nieprawidłową jednostką jest grid-1:

.grid .grid-2 {
width: 48%;
margin-left: 2%;
}
.grid .grid-1 {
width: 98%;
margin-left: 2%;
}

Jak możemy zmienić matematykę tak, aby siatka-1 = 100%, ale pozostałe jednostki siatki pozostały takie same?

Każda pomoc byłaby bardzo cenna.

Twoje zdrowie

Odpowiedzi:

Możesz wypróbować następujące rzeczy:

@column-gutter-width: 2%;
@num-columns: 6;

.grid {
margin-left: -@column-gutter-width;
.clearfix();

.generate-grid-units(@i) when (@i > 1){
.grid-@{i} {
width: ((100% / @i) - @column-gutter-width);
margin-left: @column-gutter-width;

&:first-child {
margin-left: 0;
}
}
.generate-grid-units((@i - 1));
}
.generate-grid-units(@num-columns);
.grid-1 {
width:100%;
}
}

W celu wyjaśnienia:

• pętla działa tylko wtedy, gdy @i > 1
• .grid-1 jest ustawiany ręcznie
• @num-columns jest rzeczywiście używany do generowania siatki
• width: ((100% / @i) - @column-gutter-width); teraz generuje wartość końcową, a nie wyrażenie