From c924a61605ee9d5e8252658f514f47d455fd8d2a Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Wed, 8 Jul 2020 22:01:07 +0300
Subject: [PATCH] flexboxgrid to npm

---
 package-lock.json                         | 22 +++++++++++++++++
 package.json                              |  1 +
 src/components/Article/Article.scss       |  2 +-
 src/components/Description/Description.js | 13 +++++-----
 src/components/Offers/Offers.scss         |  2 +-
 src/components/SEO/SEO.js                 |  1 -
 src/pages/404.js                          |  5 ++--
 src/pages/about.js                        | 17 ++++++-------
 src/pages/articles.js                     | 25 +++++++++----------
 src/pages/books.js                        | 29 ++++++++++++-----------
 src/pages/contacts.js                     | 13 +++++-----
 src/pages/index.js                        | 26 ++++++++++----------
 src/styles/flexboxgrid.min.css            |  1 -
 src/styles/global.scss                    |  5 ++--
 src/templates/articleTemplate.js          | 17 ++++++-------
 src/templates/categoryTemplate.js         | 25 +++++++++----------
 src/templates/tagTemplate.js              | 25 +++++++++----------
 17 files changed, 130 insertions(+), 99 deletions(-)
 delete mode 100644 src/styles/flexboxgrid.min.css

diff --git a/package-lock.json b/package-lock.json
index 7f60221..b99173d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8219,6 +8219,14 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
       "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
     },
+    "flexboxgrid2": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/flexboxgrid2/-/flexboxgrid2-7.2.1.tgz",
+      "integrity": "sha512-O2bO5ZcBXnFy7cYmyt/CKb6CuwzNuUPxWJt8WOiaot8SetE9zyUahXGTSpKDm3+CTYQ5YeEMPeunMdjcxKJz4w==",
+      "requires": {
+        "normalize.css": "^7.0.0"
+      }
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -14378,6 +14386,11 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize.css": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
+      "integrity": "sha1-q/sd2CRwZ04DIrU86xqvQSk45L8="
+    },
     "npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@@ -16701,6 +16714,15 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-flexbox-grid": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-flexbox-grid/-/react-flexbox-grid-2.1.2.tgz",
+      "integrity": "sha512-lj1oVnIJ7TY3W6tPjFUxlUYd1DLFxEg8RiX3HAYVvreE3O9HU9n2390CFoPQ+qk1E+5MXa2t/mLMafFLAa8+7Q==",
+      "requires": {
+        "flexboxgrid2": "^7.2.0",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-frame-component": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.2.tgz",
diff --git a/package.json b/package.json
index 64a6428..13dfec4 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-flexbox-grid": "^2.1.2",
     "react-github-btn": "^1.2.0",
     "react-helmet": "^6.1.0"
   },
diff --git a/src/components/Article/Article.scss b/src/components/Article/Article.scss
index e3c9f69..5a375b4 100644
--- a/src/components/Article/Article.scss
+++ b/src/components/Article/Article.scss
@@ -112,7 +112,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 1023px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .article {
     article {
       & .article-image {
diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js
index 44bac9a..e88d88c 100644
--- a/src/components/Description/Description.js
+++ b/src/components/Description/Description.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import './Description.scss'
 
 import HelloIcon from '../../images/hello-icon.svg'
@@ -6,9 +7,9 @@ import HelloIcon from '../../images/hello-icon.svg'
 const Description = () => {
   return (
     <section className="description">
-      <div className="container-fluid">
-        <div className="row">
-          <div className="col-sm-8 col-sm-offset-2">
+      <Grid fluid>
+        <Row>
+          <Col md={8} mdOffset={2}>
             <div className="desctiption-content">
               <div className="description-content__heading">
                 <span>devthread.ru</span><br />
@@ -21,9 +22,9 @@ const Description = () => {
                 <HelloIcon />
               </div>
             </div>
-          </div>
-        </div>
-      </div>
+          </Col>
+        </Row>
+      </Grid>
     </section>
   )
 }
diff --git a/src/components/Offers/Offers.scss b/src/components/Offers/Offers.scss
index 0800562..7f0f066 100644
--- a/src/components/Offers/Offers.scss
+++ b/src/components/Offers/Offers.scss
@@ -91,7 +91,7 @@
   }
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 991px) {
   .offers {
     display: none;
   }
diff --git a/src/components/SEO/SEO.js b/src/components/SEO/SEO.js
index aba18bf..123befe 100644
--- a/src/components/SEO/SEO.js
+++ b/src/components/SEO/SEO.js
@@ -38,7 +38,6 @@ const SEO = ({ title, description, image, type }) => {
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-      {/* <link rel="manifest" href="/site.webmanifest" /> */}
       <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#191919" />
       <meta name="msapplication-TileColor" content="#ffffff" />
       <meta name="theme-color" content="#ffffff" />
diff --git a/src/pages/404.js b/src/pages/404.js
index 56a1a07..cfd15ae 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid } from 'react-flexbox-grid'
 import { Link } from 'gatsby'
 import Layout from '../components/Layout/Layout'
 
@@ -6,13 +7,13 @@ const NotFound = () => {
   return (
     <Layout>
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
           <div className="error">
             <span>#404</span>
             <h1>страница не найдена</h1>
             <Link to='/'>вернуться на главную</Link>
           </div>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/pages/about.js b/src/pages/about.js
index 5bd2c90..e657132 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -11,16 +12,16 @@ const AboutPage = () => {
     <Layout>
       <SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+        <Grid fluid>
+          <Row>
+            <Col lg={9} xs={12}>
               <About title={title} pageTitle={menuLinks.filter(page => page.link === '/about')[0].name} social={social} />
-            </div>
-            <div className="col-md-3 col-xs-12">
+            </Col>
+            <Col lg={3} xs={12}>
               <Offers />
-            </div>
-          </div>
-        </div>
+            </Col>
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/pages/articles.js b/src/pages/articles.js
index 98f17fd..1323207 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
@@ -16,9 +17,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
     <Layout>
       <SEO title='Статьи' />
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+        <Grid fluid>
+          <Row>
+            <Col lg={9} xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h1>Статьи</h1>
@@ -28,18 +29,18 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
                 </Categories>
                 <Search articlesLength={edges.edges.length} />
               </div>
-            </div>
-          </div>
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+            </Col>
+          </Row>
+          <Row>
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
-            <div className="col-md-3 col-xs-12">
+            </Col >
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
-          </div>
-        </div>
+            </Col >
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/pages/books.js b/src/pages/books.js
index cf02a59..decf65c 100644
--- a/src/pages/books.js
+++ b/src/pages/books.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -13,13 +14,13 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
     <Layout>
       <SEO title='Ресурсы' />
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+        <Grid fluid>
+          <Row>
+            <Col lg={9} xs={12}>
               <div className="books">
                 <div className="books-heading">
-                    <BooksIcon />
-                    <h1>Что почитать</h1>
+                  <BooksIcon />
+                  <h1>Что почитать</h1>
                 </div>
                 <div className="books-description">
                   <p>
@@ -27,18 +28,18 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
                   </p>
                 </div>
               </div>
-            </div>
-          </div>
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+            </Col>
+          </Row>
+          <Row>
+            <Col lg={9} xs={12}>
               <Books data={edges} />
               <Newsletter />
-            </div>
-            <div className="col-md-3 col-xs-12">
+            </Col>
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
-          </div>
-        </div>
+            </Col>
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/pages/contacts.js b/src/pages/contacts.js
index 3be5847..3f7ce6d 100644
--- a/src/pages/contacts.js
+++ b/src/pages/contacts.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Contacts from '../components/Contacts/Contacts'
@@ -8,13 +9,13 @@ const ContactsPage = () => {
     <Layout>
       <SEO title='📝 Контакты' description='Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные.' />
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-10 col-md-offset-1">
+        <Grid fluid>
+          <Row>
+            <Col lg={10} lgOffset={1}>
               <Contacts />
-            </div>
-          </div>
-        </div>
+            </Col>
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/pages/index.js b/src/pages/index.js
index a56c88f..f3ee4d0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,33 +9,35 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 import ArrowNext from '../images/arrow-next.svg'
 
+import { Grid, Row, Col } from 'react-flexbox-grid'
+
 const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO />
       <Description />
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-xs-12">
+        <Grid fluid>
+          <Row>
+            <Col xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h3>Последние статьи</h3>
                   <Link to='/articles'>смотреть все <ArrowNext /></Link>
                 </div>
               </div>
-            </div>
-          </div>
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+            </Col>
+          </Row>
+          <Row>
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
-            <div className="col-md-3 col-xs-12">
+            </Col>
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
-          </div>
-        </div>
+            </Col>
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/styles/flexboxgrid.min.css b/src/styles/flexboxgrid.min.css
deleted file mode 100644
index 2f502c9..0000000
--- a/src/styles/flexboxgrid.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}
\ No newline at end of file
diff --git a/src/styles/global.scss b/src/styles/global.scss
index a7e09c3..bf612b2 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,12 +1,11 @@
-@import './flexboxgrid.min';
 @import './variables.scss';
 @import './fonts.scss';
 
 .container-fluid {
   max-width: 1200px;
   margin: 0 auto;
-  padding-right: 15px;
-  padding-left: 15px;
+  padding-right: 15px !important;
+  padding-left: 15px !important;
 }
 
 .btn-primary {
diff --git a/src/templates/articleTemplate.js b/src/templates/articleTemplate.js
index aa88937..7c08abd 100644
--- a/src/templates/articleTemplate.js
+++ b/src/templates/articleTemplate.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import Layout from '../components/Layout/Layout'
 import Article from '../components/Article/Article'
 import Offers from '../components/Offers/Offers'
@@ -13,18 +14,18 @@ const articleTemplate = ({ data }) => {
   return (
     <Layout>
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+        <Grid fluid>
+          <Row>
+            <Col lg={9} xs={12}>
               <Article data={frontmatter} html={html} />
               <Newsletter />
               <MoreArticles />
-            </div>
-            <div className="col-md-3 col-xs-12">
+            </Col>
+            <Col lg={3} xs={12}>
               <Offers />
-            </div>
-          </div>
-        </div>
+            </Col>
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index 3953b67..2bf6a8e 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
@@ -16,9 +17,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
     <Layout>
       <SEO title={title} />
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+        <Grid fluid>
+          <Row>
+            <Col lg={9} xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h1>Статьи</h1>
@@ -31,18 +32,18 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
                   <p>Показано {edges.edges.length} из категории "{title}"</p>
                 </div>
               </div>
-            </div>
-          </div>
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+            </Col>
+          </Row>
+          <Row>
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
-            <div className="col-md-3 col-xs-12">
+            </Col>
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
-          </div>
-        </div>
+            </Col>
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
index 9c04618..a32461c 100644
--- a/src/templates/tagTemplate.js
+++ b/src/templates/tagTemplate.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
@@ -16,9 +17,9 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
     <Layout>
       <SEO title={title} />
       <main>
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+        <Grid fluid>
+          <Row>
+            <Col lg={9} xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h1>Статьи</h1>
@@ -31,18 +32,18 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
                   <p>Показано {edges.edges.length} по тегу "{title}"</p>
                 </div>
               </div>
-            </div>
-          </div>
-          <div className="row">
-            <div className="col-md-9 col-xs-12">
+            </Col>
+          </Row>
+          <Row>
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
-            <div className="col-md-3 col-xs-12">
+            </Col>
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
-          </div>
-        </div>
+            </Col>
+          </Row>
+        </Grid>
       </main>
     </Layout>
   )