"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "We can create a website template very easily with Grid. We can design the whole website with basic css methods such as float, display position or flexbox, but the Grid system is much easier. And it makes our job a lot easier. While Flexbox can do our one-dimensional coding, in the grid model, we can code in both dimensions. We usually use columns and rows when creating the grid structure. We do not have to use the css grid in all of our designs. For example we can make menus with flexbox. So we can make the general design of our page with css grid." }), "\n", _jsx(_components.p, { children: "First of all, display: grid; we run the system. In other words, we give our items a grid feature." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token constant", children: "DOCTYPE" }), " html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"UTF-8\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta http", _jsx(_components.span, { className: "token operator", children: "-" }), "equiv", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"X-UA-Compatible\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"IE=edge\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Document" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n body ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "216" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "126" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 15px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "195" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "196" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "197" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), "dodgerblue", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "6" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "7" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "9" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/fyemyiwfa83pdtvpck8c.jpg" }), "\n", _jsx(_components.p, { children: "We add our grid-template-columns code and divide it into 3 columns" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "columns", _jsx(_components.span, { className: "token operator", children: ":" }), " 150px 300px 200px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "216" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "126" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/x5veaqfkrf6fmpna1zt1.jpg" }), "\n", _jsx(_components.p, { children: "we set the height of our rows." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "columns", _jsx(_components.span, { className: "token operator", children: ":" }), " 150px 300px 200px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "rows", _jsx(_components.span, { className: "token operator", children: ":" }), "200px 300px 150px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "216" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "126" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/fhxopnjv0tpradqwfgvq.jpg" }), "\n", _jsx(_components.p, { children: "when we delete margin information from our items" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 15px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "195" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "196" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "197" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), "dodgerblue", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/simyx7qclbmkn523g0qb.jpg" }), "\n", _jsx(_components.p, { children: "We have a gap property. The grid-gap property defines the size of the gap between the rows and columns in a grid layout." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "columns", _jsx(_components.span, { className: "token operator", children: ":" }), " 150px 300px 200px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "rows", _jsx(_components.span, { className: "token operator", children: ":" }), "200px 300px 150px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "gap" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "216" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "126" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/hz1iilotyoy2ushp1qsa.jpg" }), "\n", _jsx(_components.p, { children: "when the same value repeats, we use the repeat function. 3 values and each will be 150px" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token comment", children: "/* grid-template-columns: 150px 150px 150px;\n grid-template-rows:200px 150px 150px; */" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "columns", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "repeat" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "150px", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "rows", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "repeat" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " 150px", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "gap" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "216" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "126" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/jjvyf2vcdobwed8yk1rf.jpg" }), "\n", _jsx(_components.p, { children: "Responsive design is not supported because we give pixel values. so we can use the concept of fraction." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "columns", _jsx(_components.span, { className: "token operator", children: ":" }), " 2fr 1fr 3fr", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "rows", _jsx(_components.span, { className: "token operator", children: ":" }), " 2fr 1fr 3fr", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "gap" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "216" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "126" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-6/12", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/y3zdtuxeqqqx9kkbdkt6.jpg" }), "\n", _jsx(_components.p, { children: "When we build a website, we start with such an interface." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token constant", children: "DOCTYPE" }), " html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"UTF-8\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta http", _jsx(_components.span, { className: "token operator", children: "-" }), "equiv", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"X-UA-Compatible\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"IE=edge\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1.0\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Document" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n body ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "gap" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 3px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 15px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "195" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "196" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "197" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " dodgerblue", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"header item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "HEADER" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"menu item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "SIDEBAR" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"content item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "CONTENT" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"footer item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "FOOTER" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "This is our general outline." }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/yl5tly1saoktiepibgks.jpg" }), "\n", _jsx(_components.p, { children: "Now we can easily design using the grid system." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token constant", children: "DOCTYPE" }), " html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"UTF-8\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta http", _jsx(_components.span, { className: "token operator", children: "-" }), "equiv", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"X-UA-Compatible\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"IE=edge\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1.0\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Document" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n body ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " grid", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "gap" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 3px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "columns", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "repeat" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " 1fr", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "template", _jsx(_components.span, { className: "token operator", children: "-" }), "rows", _jsx(_components.span, { className: "token operator", children: ":" }), " 40px 240px 40px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "header" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: "-" }), "start", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: "-" }), "end", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "13" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "content" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " span ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "sidebar" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " span ", _jsx(_components.span, { className: "token number", children: "4" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "footer" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " span ", _jsx(_components.span, { className: "token number", children: "12" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 15px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "195" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "196" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "197" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " dodgerblue", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"header item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "HEADER" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"content item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "CONTENT" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"sidebar item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "SIDEBAR" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"footer item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token constant", children: "FOOTER" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output:" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672609349/y4h1dsuj4obnvsrbekrf.jpg" }), "\n", _jsx(_components.p, { children: "we split our page into 12 columns and the sidebar took up 4 worth of space and the content took up 8 worth of space. Just like we did in Botsrap." }), "\n", _jsx(_components.p, { children: "Of course, we can also do it this way." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "content" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "sidebar" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8" }), _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "footer" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n grid", _jsx(_components.span, { className: "token operator", children: "-" }), "column", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "Our output will still be the same." }), "\n", _jsx(_components.p, { children: "Bye bye ✋" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };