Skip to content

Commit c6e9302

Browse files
AlexSkrypnykAlexSkrypnyk
committed
Revert "Fixed margins on the nested fluid grid."
This reverts commit 48ef65a.
1 parent ba2653a commit c6e9302

File tree

3 files changed

+15
-125
lines changed

3 files changed

+15
-125
lines changed

‎components/00-base/grid/grid.scss

+3-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@
66

77
// Container class should wrap every row.
88
.container {
9-
&,
10-
& .container-fluid {
11-
@include ct-container();
12-
}
9+
@include ct-container();
1310
}
1411

1512
.container-fluid {
@@ -19,6 +16,8 @@
1916
.row {
2017
$root: &;
2118

19+
@include ct-row($ct-grid-gutters);
20+
2221
&#{$root}--reverse {
2322
flex-direction: row-reverse;
2423
}

‎components/00-base/grid/grid.stories.js

+3-112
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default {
55
title: 'Base/Grid',
66
parameters: {
77
layout: 'fullscreen',
8-
docs: '<div class="grid-story-docs story-grid-outlines row row--no-grow"><strong>Outline colors: </strong><br/><span class="col grid-story-docs-color-container-contained">Contained container</span><span class="col grid-story-docs-color-container-fluid">Fluid container</span><span class="col grid-story-docs-color-row">Row</span><span class="col grid-story-docs-color-template-column">Template column</span><span class="col grid-story-docs-color-auto-column">Auto column</span><span class="col grid-story-docs-color-placeholder">Placeholder</span></div>',
8+
docs: '<div class="grid-story-docs story-grid-outlines row row--no-grow"><strong>Outline colors: </strong><span class="col grid-story-docs-color-container-contained">Contained container</span><span class="col grid-story-docs-color-container-fluid">Fluid container</span><span class="col grid-story-docs-color-row">Row</span><span class="col grid-story-docs-color-template-column">Template column</span><span class="col grid-story-docs-color-auto-column">Auto column</span><span class="col grid-story-docs-color-placeholder">Placeholder</span></div>',
99
docsClass: 'story-docs--conditional',
1010
},
1111
};
@@ -135,7 +135,7 @@ export const Grid = () => {
135135
placeholder('Nested'),
136136
placeholder('Nested'),
137137
],
138-
use_container: true,
138+
use_container: false,
139139
column_attributes: 'data-story-total-columns="3"',
140140
}),
141141
placeholder('Parent'),
@@ -154,123 +154,14 @@ export const Grid = () => {
154154
placeholder('Nested'),
155155
placeholder('Nested'),
156156
],
157-
use_container: true,
157+
use_container: false,
158158
column_attributes: 'data-story-total-columns="3"',
159159
}),
160160
placeholder('Parent'),
161161
],
162162
column_attributes: 'data-story-total-columns="2"',
163163
});
164164

165-
html += `<div class="story-container__subtitle">Template column container in container ${code('.container .container > .row > .col-[breakpoint]-[column]')}</div>`;
166-
cols = ['A', 'B', 'C', 'D'];
167-
html += CivicThemeGrid({
168-
items: [
169-
CivicThemeGrid({
170-
items: [
171-
placeholder('Nested'),
172-
placeholder('Nested'),
173-
placeholder('Nested'),
174-
],
175-
use_container: true,
176-
is_fluid: false,
177-
column_attributes: 'data-story-total-columns="3"',
178-
}),
179-
placeholder('Parent'),
180-
],
181-
use_container: true,
182-
is_fluid: false,
183-
template_column_count: 2,
184-
column_attributes: 'data-story-total-columns="2"',
185-
});
186-
187-
html += `<div class="story-container__subtitle">Template column fluid container in container ${code('.container .container-fluid > .row > .col-[breakpoint]-[column]')}</div>`;
188-
cols = ['A', 'B', 'C', 'D'];
189-
html += CivicThemeGrid({
190-
items: [
191-
CivicThemeGrid({
192-
items: [
193-
placeholder('Nested'),
194-
placeholder('Nested'),
195-
placeholder('Nested'),
196-
],
197-
use_container: true,
198-
is_fluid: true,
199-
column_attributes: 'data-story-total-columns="3"',
200-
}),
201-
placeholder('Parent'),
202-
],
203-
use_container: true,
204-
is_fluid: false,
205-
template_column_count: 2,
206-
column_attributes: 'data-story-total-columns="2"',
207-
});
208-
209-
html += `<div class="story-container__subtitle">Template column container in fluid container ${code('.container-fluid .container > .row > .col-[breakpoint]-[column]')}</div>`;
210-
cols = ['A', 'B', 'C', 'D'];
211-
html += CivicThemeGrid({
212-
items: [
213-
CivicThemeGrid({
214-
items: [
215-
placeholder('Nested'),
216-
placeholder('Nested'),
217-
placeholder('Nested'),
218-
],
219-
use_container: true,
220-
is_fluid: false,
221-
column_attributes: 'data-story-total-columns="3"',
222-
}),
223-
placeholder('Parent'),
224-
],
225-
use_container: true,
226-
is_fluid: true,
227-
template_column_count: 2,
228-
column_attributes: 'data-story-total-columns="2"',
229-
});
230-
231-
html += `<div class="story-container__subtitle">Template column container in fluid container (all columns) ${code('.container-fluid .container > .row > .col-[breakpoint]-[column]')}</div>`;
232-
cols = ['A', 'B', 'C', 'D'];
233-
html += CivicThemeGrid({
234-
items: [
235-
CivicThemeGrid({
236-
items: [
237-
placeholder('Nested'),
238-
placeholder('Nested'),
239-
placeholder('Nested'),
240-
],
241-
use_container: true,
242-
is_fluid: false,
243-
column_attributes: 'data-story-total-columns="3"',
244-
}),
245-
],
246-
use_container: true,
247-
is_fluid: true,
248-
template_column_count: 1,
249-
column_attributes: 'data-story-total-columns="1"',
250-
});
251-
252-
html += `<div class="story-container__subtitle">Template column fluid container in fluid container ${code('.container-fluid .container-fluid > .row > .col-[breakpoint]-[column]')}</div>`;
253-
cols = ['A', 'B', 'C', 'D'];
254-
html += CivicThemeGrid({
255-
items: [
256-
CivicThemeGrid({
257-
items: [
258-
placeholder('Nested'),
259-
placeholder('Nested'),
260-
placeholder('Nested'),
261-
],
262-
use_container: true,
263-
is_fluid: true,
264-
column_attributes: 'data-story-total-columns="3"',
265-
}),
266-
placeholder('Parent'),
267-
],
268-
use_container: true,
269-
is_fluid: true,
270-
template_column_count: 2,
271-
column_attributes: 'data-story-total-columns="2"',
272-
});
273-
274165
html += `<div class="story-container__title">Row utilities</div>`;
275166

276167
html += `<div class="story-container__subtitle">Reversed columns ${code('.row.row--reverse')}</div>`;

‎components/00-base/mixins/_grid.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,18 @@
3232
max-width: map.get($ct-breakpoints, $bp) - (map.get($ct-grid-offsets, $bp) * 2);
3333
}
3434
}
35-
36-
> .row {
37-
@include ct-row($ct-grid-gutters);
38-
}
3935
}
4036
@else {
4137
width: 100%;
4238

43-
> .row {
44-
@include ct-row(false);
39+
// Reset negative row margins which are used to offset column margins.
40+
.row {
41+
@each $bp, $value in $ct-breakpoints {
42+
@include ct-breakpoint($bp) {
43+
margin-left: auto;
44+
margin-right: auto;
45+
}
46+
}
4547
}
4648
}
4749
}
@@ -56,9 +58,7 @@
5658
padding-inline-start: 0;
5759
list-style: none;
5860

59-
@if $gutters != false {
60-
@include _ct-print-all-gutters($rule-prefix: margin);
61-
}
61+
@include _ct-print-all-gutters($rule-prefix: margin);
6262
}
6363

6464
@mixin ct-flex-align-right() {

0 commit comments

Comments
 (0)