diff --git a/contents/_includes/patterns/same-height-columns.njk b/contents/_includes/patterns/same-height-columns.njk new file mode 100644 index 0000000..0100de2 --- /dev/null +++ b/contents/_includes/patterns/same-height-columns.njk @@ -0,0 +1,9 @@ +
+ {% for i in range(0, 3) -%} +
+ {% rectangle "hor", "md", 100 %} +
{% lines "hor", (i + 1) * 4 %}
+ {% rectangle "hor" %} +
+ {%- endfor %} +
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 6df3a74..fe65b89 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -112,6 +112,7 @@ eleventyExcludeFromCollections: true {% pattern "Card layout" %}{% include "patterns/card-layout.njk" %}{% endpattern %} {% pattern "Holy grail" %}{% include "patterns/holy-grail.njk" %}{% endpattern %} {% pattern "Masonry grid" %}{% include "patterns/masonry-grid.njk" %}{% endpattern %} + {% pattern "Same height columns" %}{% include "patterns/same-height-columns.njk" %}{% endpattern %} diff --git a/contents/same-height-columns.md b/contents/same-height-columns.md new file mode 100644 index 0000000..4108fdf --- /dev/null +++ b/contents/same-height-columns.md @@ -0,0 +1,54 @@ +--- +layout: layouts/post.njk +title: Same height columns +description: Create same height columns with CSS flexbox +keywords: css flexbox, css layout, css same height columns +--- + +## HTML + +```html +
+ +
+ + ... + + +
+ ... +
+ + + ... +
+ + + ... +
+``` + +## CSS + +```css +.same-height-columns { + display: flex; +} + +.same-height-columns__column { + flex: 1; + /* Space between columns */ + margin: 0 8px; + + /* Layout each column */ + display: flex; + flex-direction: column; +} + +.same-height-columns__content { + /* Take available height */ + flex: 1; +} +``` + +{% demo %}{% include "patterns/same-height-columns.njk" %}{% enddemo %} diff --git a/pages/same-height-columns/index.tsx b/pages/same-height-columns/index.tsx deleted file mode 100644 index 00b3b39..0000000 --- a/pages/same-height-columns/index.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
- - ... - - -
- ... -
- - - ... -
- - - ... - -`} - css={` - .container { - display: flex; - } - - .container__column { - flex: 1; - /* Space between columns */ - margin: 0 8px; - - /* Layout each column */ - display: flex; - flex-direction: column; - } - - .container__content { - /* Take available height */ - flex: 1; - } - `} - > -
-
-
- -
- -
-
- -
-
-
- -
-
- -
- -
-
- -
-
-
- -
-
- -
- -
-
- -
-
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/same-height-columns/Cover.tsx b/patterns/same-height-columns/Cover.tsx deleted file mode 100644 index 441f7d1..0000000 --- a/patterns/same-height-columns/Cover.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; -import Square from '../../placeholders/Square'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
- -
- -
-
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index cbfab1a..e36983f 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -67,6 +67,7 @@ @import './patterns/rating'; @import './patterns/resizable-element'; @import './patterns/ribbon'; +@import './patterns/same-height-columns'; @import './patterns/search-box'; @import './patterns/separator'; @import './patterns/slider'; diff --git a/styles/patterns/_same-height-columns.scss b/styles/patterns/_same-height-columns.scss new file mode 100644 index 0000000..9e44a4c --- /dev/null +++ b/styles/patterns/_same-height-columns.scss @@ -0,0 +1,27 @@ +.same-height-columns { + display: flex; + + /* Demo */ + width: 100%; + height: 100%; +} + +.same-height-columns__column { + flex: 1; + /* Space between columns */ + margin: 0 0.25rem; + + /* Layout each column */ + display: flex; + flex-direction: column; + + /* Demo */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + padding: 0.25rem; +} + +.same-height-columns__content { + /* Take available height */ + flex: 1; +} \ No newline at end of file