Fundament 6 Rinnenbreite mit SASS ändern - zurb-foundation

Ich benutze das Grid-Xy-System und versuche esMit meiner settings.scss-Datei ändere ich die Rinnsteinbreite von Foundation 6, aber ich habe kein Glück. Mein oberstes Ziel ist es, die Rinnen zwischen meinen Zellen 20px breit anstatt 15px zu haben. Ich habe versucht, jede Variable zu ändern, die mir einfällt oder finden Sie in meiner Forschung. Unten ist eine Liste von Variablen, die ich versucht habe.

$grid-column-gutter: (
small: 30px,
medium: 45px,
);
$column-gutter: rem-calc(20);
$gutters: rem-calc(20);
$gutter: rem-calc(20);
$grid-margin-gutters:  rem-calc(20);

Ich weiß sicher, dass meine _settings.scss funktioniert, weil ich $ global-width ändern konnte und es hatte einen Effekt.

Hier ist der HTML-Code, den ich benutze

<div class="grid-x grid-padding-x grid-container">
<div class="cell large-4 medium-6 small-12">
<h2>Test</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 2</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 3</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 4</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 5</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 6</h2>
</div>
</div>

Wie änderst du die Standardauffüllbreite zwischen grid-xy-Zellen?

Antworten:

0 für die Antwort № 1

Es stellte sich heraus, dass ich nicht die richtigen Variablen verwendete

$grid-padding-gutters: 40px;
$grid-margin-gutters: 40px;

Hat funktioniert


Verwandte Fragen