"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9797],{3905:function(e,t,r){r.d(t,{Zo:function(){return u},kt:function(){return f}});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var c=n.createContext({}),p=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(c.Provider,{value:t},e.children)},l={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,u=a(e,["components","mdxType","originalType","parentName"]),m=p(r),f=o,d=m["".concat(c,".").concat(f)]||m[f]||l[f]||i;return r?n.createElement(d,s(s({ref:t},u),{},{components:r})):n.createElement(d,s({ref:t},u))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,s=new Array(i);s[0]=m;var a={};for(var c in t)hasOwnProperty.call(t,c)&&(a[c]=t[c]);a.originalType=e,a.mdxType="string"==typeof e?e:o,s[1]=a;for(var p=2;p<i;p++)s[p]=r[p];return n.createElement.apply(null,s)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"},3992:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return a},contentTitle:function(){return c},metadata:function(){return p},toc:function(){return u},default:function(){return m}});var n=r(7462),o=r(3366),i=(r(7294),r(3905)),s=["components"],a={title:"Grid system",sidebar_position:5},c=void 0,p={unversionedId:"overview/grid-system",id:"overview/grid-system",isDocsHomePage:!1,title:"Grid system",description:"FlatifyCSS does not provide a grid system, in the humble opinion of the FlatifyCSS team, it is not necessary. At this point in time you can create impressive layouts with the mixture of CSS flexbox and grid.",source:"@site/docs/overview/grid-system.mdx",sourceDirName:"overview",slug:"/overview/grid-system",permalink:"/docs/overview/grid-system",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/grid-system.mdx",tags:[],version:"current",sidebarPosition:5,frontMatter:{title:"Grid system",sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"Responsive",permalink:"/docs/overview/responsive"},next:{title:"Accessibility",permalink:"/docs/overview/a11y"}},u=[],l={toc:u};function m(e){var t=e.components,r=(0,o.Z)(e,s);return(0,i.kt)("wrapper",(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"FlatifyCSS does not provide a grid system, in the humble opinion of the FlatifyCSS team, ",(0,i.kt)("strong",{parentName:"p"},"it is not necessary"),". At this point in time you can create impressive layouts with the mixture of CSS ",(0,i.kt)("a",{parentName:"p",href:"https://css-tricks.com/snippets/css/a-guide-to-flexbox/"},"flexbox")," and ",(0,i.kt)("a",{parentName:"p",href:"https://css-tricks.com/snippets/css/complete-guide-grid/"},"grid"),".\nTherefore there is no need to add a bunch of code that is not even flexible enough for any layout, you can make something better with the technologies mentioned above."),(0,i.kt)("p",null,"If you still want to use a grid system, you can add the ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap-grid.min.css"},"Bootstrap grid file")," to your project."))}m.isMDXComponent=!0}}]);