From 73cdfd7da460e4af8750c102f1a0c5ad42c9c53b Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sat, 14 Oct 2017 14:19:34 +0200 Subject: [PATCH] change gutter attr to only effect column gap --- README.md | 4 ++-- cssgenerator.js | 8 ++++---- dist/grid.js | 16 ++++++++-------- docs/grid.js | 16 ++++++++-------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index d8fd3f1..4afc99a 100644 --- a/README.md +++ b/README.md @@ -45,10 +45,10 @@ Simply add a `` element to your page. All first level children o ## Attributes ### `` #### gutter -The `gutter` attribute defines the gutter or gap in pixels between the columns and rows of the cells in the grid. They can either be set to one value e.g. `gutter="10"` (which will translate into a `10px` gap) or to a specific value per breakpoint e.g. `gutter="10s 20m 25l"`. +The `gutter` attribute defines the gutter or gap in pixels between the **columns** of the grid. It can either be set to one value e.g. `gutter="10"` (which will translate into a `10px` gap) or to a specific value per breakpoint e.g. `gutter="10s 20m 25l"`. #### rowgutter -The `rowgutter` attribute defines the gutter or gap in pixels between the rows of the grid. It is useful when you want to have different values for the row and column gutter and can be set either a general value e.g. `10` or a specific value per breakpoint e.g. `gutter="10s 20m 25l"` exactly like the `gutter` attribute. +The `rowgutter` attribute defines the gutter or gap in pixels between the **rows** of the grid. It can either be set to a general value e.g. `10` or a specific value per breakpoint e.g. `gutter="10s 20m 25l"` exactly like the `gutter` attribute. #### columns The `columns` attribute defines the number of columns in the grid e.g. `columns="12"`. If you want to change the number of columns per breakpoint you can define breakpoint specific sizes by appending the breakpoint to the column number: `columns="1s 2m 6l"`. diff --git a/cssgenerator.js b/cssgenerator.js index cdee38a..651bf9d 100644 --- a/cssgenerator.js +++ b/cssgenerator.js @@ -15,8 +15,8 @@ let style = () => { result += ` :host([size="${breakpoint}"]){ grid-template-columns: repeat(var(--grid-columns-${breakpoint}, var(--grid-columns, auto-fill)), 1fr); grid-template-rows: repeat(var(--grid-rows-${breakpoint}, var(--grid-rows, none)), 1fr); - grid-gap: var(--grid-gutter-${breakpoint}, var(--grid-gutter, 0)); - grid-row-gap: var(--grid-row-gutter-${breakpoint}, var(--grid-row-gutter, var(--grid-gutter, 0))); + grid-column-gap: var(--grid-gutter-${breakpoint}, var(--grid-gutter, 0)); + grid-row-gap: var(--grid-row-gutter-${breakpoint}, var(--grid-row-gutter, 0)); }\n` }) return result @@ -64,8 +64,8 @@ let style = () => { width: 100%; grid-template-columns: repeat(var(--grid-columns, auto-fill), 1fr); grid-template-rows: repeat(var(--grid-rows, none), 1fr); - grid-gap: var(--grid-gutter, 0); - grid-row-gap: var(--grid-row-gutter, var(--grid-gutter, 0)); + grid-column-gap: var(--grid-gutter, 0); + grid-row-gap: var(--grid-row-gutter, 0); } ${host()} :host([autoflow]){ diff --git a/dist/grid.js b/dist/grid.js index caa8011..efbdfa4 100644 --- a/dist/grid.js +++ b/dist/grid.js @@ -8,26 +8,26 @@ let style = ` width: 100%; grid-template-columns: repeat(var(--grid-columns, auto-fill), 1fr); grid-template-rows: repeat(var(--grid-rows, none), 1fr); - grid-gap: var(--grid-gutter, 0); - grid-row-gap: var(--grid-row-gutter, var(--grid-gutter, 0)); + grid-column-gap: var(--grid-gutter, 0); + grid-row-gap: var(--grid-row-gutter, 0); } :host([size="s"]){ grid-template-columns: repeat(var(--grid-columns-s, var(--grid-columns, auto-fill)), 1fr); grid-template-rows: repeat(var(--grid-rows-s, var(--grid-rows, none)), 1fr); - grid-gap: var(--grid-gutter-s, var(--grid-gutter, 0)); - grid-row-gap: var(--grid-row-gutter-s, var(--grid-row-gutter, var(--grid-gutter, 0))); + grid-column-gap: var(--grid-gutter-s, var(--grid-gutter, 0)); + grid-row-gap: var(--grid-row-gutter-s, var(--grid-row-gutter, 0)); } :host([size="m"]){ grid-template-columns: repeat(var(--grid-columns-m, var(--grid-columns, auto-fill)), 1fr); grid-template-rows: repeat(var(--grid-rows-m, var(--grid-rows, none)), 1fr); - grid-gap: var(--grid-gutter-m, var(--grid-gutter, 0)); - grid-row-gap: var(--grid-row-gutter-m, var(--grid-row-gutter, var(--grid-gutter, 0))); + grid-column-gap: var(--grid-gutter-m, var(--grid-gutter, 0)); + grid-row-gap: var(--grid-row-gutter-m, var(--grid-row-gutter, 0)); } :host([size="l"]){ grid-template-columns: repeat(var(--grid-columns-l, var(--grid-columns, auto-fill)), 1fr); grid-template-rows: repeat(var(--grid-rows-l, var(--grid-rows, none)), 1fr); - grid-gap: var(--grid-gutter-l, var(--grid-gutter, 0)); - grid-row-gap: var(--grid-row-gutter-l, var(--grid-row-gutter, var(--grid-gutter, 0))); + grid-column-gap: var(--grid-gutter-l, var(--grid-gutter, 0)); + grid-row-gap: var(--grid-row-gutter-l, var(--grid-row-gutter, 0)); } :host([autoflow]){ diff --git a/docs/grid.js b/docs/grid.js index caa8011..efbdfa4 100644 --- a/docs/grid.js +++ b/docs/grid.js @@ -8,26 +8,26 @@ let style = ` width: 100%; grid-template-columns: repeat(var(--grid-columns, auto-fill), 1fr); grid-template-rows: repeat(var(--grid-rows, none), 1fr); - grid-gap: var(--grid-gutter, 0); - grid-row-gap: var(--grid-row-gutter, var(--grid-gutter, 0)); + grid-column-gap: var(--grid-gutter, 0); + grid-row-gap: var(--grid-row-gutter, 0); } :host([size="s"]){ grid-template-columns: repeat(var(--grid-columns-s, var(--grid-columns, auto-fill)), 1fr); grid-template-rows: repeat(var(--grid-rows-s, var(--grid-rows, none)), 1fr); - grid-gap: var(--grid-gutter-s, var(--grid-gutter, 0)); - grid-row-gap: var(--grid-row-gutter-s, var(--grid-row-gutter, var(--grid-gutter, 0))); + grid-column-gap: var(--grid-gutter-s, var(--grid-gutter, 0)); + grid-row-gap: var(--grid-row-gutter-s, var(--grid-row-gutter, 0)); } :host([size="m"]){ grid-template-columns: repeat(var(--grid-columns-m, var(--grid-columns, auto-fill)), 1fr); grid-template-rows: repeat(var(--grid-rows-m, var(--grid-rows, none)), 1fr); - grid-gap: var(--grid-gutter-m, var(--grid-gutter, 0)); - grid-row-gap: var(--grid-row-gutter-m, var(--grid-row-gutter, var(--grid-gutter, 0))); + grid-column-gap: var(--grid-gutter-m, var(--grid-gutter, 0)); + grid-row-gap: var(--grid-row-gutter-m, var(--grid-row-gutter, 0)); } :host([size="l"]){ grid-template-columns: repeat(var(--grid-columns-l, var(--grid-columns, auto-fill)), 1fr); grid-template-rows: repeat(var(--grid-rows-l, var(--grid-rows, none)), 1fr); - grid-gap: var(--grid-gutter-l, var(--grid-gutter, 0)); - grid-row-gap: var(--grid-row-gutter-l, var(--grid-row-gutter, var(--grid-gutter, 0))); + grid-column-gap: var(--grid-gutter-l, var(--grid-gutter, 0)); + grid-row-gap: var(--grid-row-gutter-l, var(--grid-row-gutter, 0)); } :host([autoflow]){