<!doctype html><html data-n-head-ssr> <head > <meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" property="twitter:title" content="How to create a CSS grid layout?"><meta data-n-head="ssr" property="twitter:description" content="How to create a CSS grid layout?"><meta data-n-head="ssr" property="og:title" content="How to create a CSS grid layout?"><meta data-n-head="ssr" property="og:url" content="https://forum.elvanco.com/thread/how-to-create-a-css-grid-layout"><meta data-n-head="ssr" property="og:description" content="How to create a CSS grid layout?"><meta data-n-head="ssr" property="og:site_name" content="Questions & Answers"><meta data-n-head="ssr" data-hid="description" name="description" content="How to create a CSS grid layout?"><title>How to create a CSS grid layout?</title><link data-n-head="ssr" rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Manrope"><link data-n-head="ssr" rel="stylesheet" href="https://forum-static.fra1.cdn.digitaloceanspaces.com/css/007e59e4-89a3-4daf-8cf1-0c678fc29352/custom.css"><link data-n-head="ssr" rel="icon" type="image/png" href="https://forum-static.fra1.cdn.digitaloceanspaces.com/images/007e59e4-89a3-4daf-8cf1-0c678fc29352/favicon.png"><link data-n-head="ssr" data-hid="i18n-can" rel="canonical" href="https://forum.elvanco.com/thread/how-to-create-a-css-grid-layout"><style data-n-head="vuetify" type="text/css" id="vuetify-theme-stylesheet" nonce="undefined">.v-application a { color: #ff5252; }.v-application .primary { background-color: #ff5252 !important; border-color: #ff5252 !important;}.v-application .primary--text { color: #ff5252 !important; caret-color: #ff5252 !important;}.v-application .primary.lighten-5 { background-color: #ffe4d5 !important; border-color: #ffe4d5 !important;}.v-application .primary--text.text--lighten-5 { color: #ffe4d5 !important; caret-color: #ffe4d5 !important;}.v-application .primary.lighten-4 { background-color: #ffc6b9 !important; border-color: #ffc6b9 !important;}.v-application .primary--text.text--lighten-4 { color: #ffc6b9 !important; caret-color: #ffc6b9 !important;}.v-application .primary.lighten-3 { background-color: #ffa99e !important; border-color: #ffa99e !important;}.v-application .primary--text.text--lighten-3 { color: #ffa99e !important; caret-color: #ffa99e !important;}.v-application .primary.lighten-2 { background-color: #ff8c84 !important; border-color: #ff8c84 !important;}.v-application .primary--text.text--lighten-2 { color: #ff8c84 !important; caret-color: #ff8c84 !important;}.v-application .primary.lighten-1 { background-color: #ff6f6a !important; border-color: #ff6f6a !important;}.v-application .primary--text.text--lighten-1 { color: #ff6f6a !important; caret-color: #ff6f6a !important;}.v-application .primary.darken-1 { background-color: #df323b !important; border-color: #df323b !important;}.v-application .primary--text.text--darken-1 { color: #df323b !important; caret-color: #df323b !important;}.v-application .primary.darken-2 { background-color: #bf0025 !important; border-color: #bf0025 !important;}.v-application .primary--text.text--darken-2 { color: #bf0025 !important; caret-color: #bf0025 !important;}.v-application .primary.darken-3 { background-color: #9f0010 !important; border-color: #9f0010 !important;}.v-application .primary--text.text--darken-3 { color: #9f0010 !important; caret-color: #9f0010 !important;}.v-application .primary.darken-4 { background-color: #800000 !important; border-color: #800000 !important;}.v-application .primary--text.text--darken-4 { color: #800000 !important; caret-color: #800000 !important;}.v-application .secondary { background-color: #424242 !important; border-color: #424242 !important;}.v-application .secondary--text { color: #424242 !important; caret-color: #424242 !important;}.v-application .secondary.lighten-5 { background-color: #c1c1c1 !important; border-color: #c1c1c1 !important;}.v-application .secondary--text.text--lighten-5 { color: #c1c1c1 !important; caret-color: #c1c1c1 !important;}.v-application .secondary.lighten-4 { background-color: #a6a6a6 !important; border-color: #a6a6a6 !important;}.v-application .secondary--text.text--lighten-4 { color: #a6a6a6 !important; caret-color: #a6a6a6 !important;}.v-application .secondary.lighten-3 { background-color: #8b8b8b !important; border-color: #8b8b8b !important;}.v-application .secondary--text.text--lighten-3 { color: #8b8b8b !important; caret-color: #8b8b8b !important;}.v-application .secondary.lighten-2 { background-color: #727272 !important; border-color: #727272 !important;}.v-application .secondary--text.text--lighten-2 { color: #727272 !important; caret-color: #727272 !important;}.v-application .secondary.lighten-1 { background-color: #595959 !important; border-color: #595959 !important;}.v-application .secondary--text.text--lighten-1 { color: #595959 !important; caret-color: #595959 !important;}.v-application .secondary.darken-1 { background-color: #2c2c2c !important; border-color: #2c2c2c !important;}.v-application .secondary--text.text--darken-1 { color: #2c2c2c !important; caret-color: #2c2c2c !important;}.v-application .secondary.darken-2 { background-color: #171717 !important; border-color: #171717 !important;}.v-application .secondary--text.text--darken-2 { color: #171717 !important; caret-color: #171717 !important;}.v-application .secondary.darken-3 { background-color: #000000 !important; border-color: #000000 !important;}.v-application .secondary--text.text--darken-3 { color: #000000 !important; caret-color: #000000 !important;}.v-application .secondary.darken-4 { background-color: #000000 !important; border-color: #000000 !important;}.v-application .secondary--text.text--darken-4 { color: #000000 !important; caret-color: #000000 !important;}.v-application .accent { background-color: #000000 !important; border-color: #000000 !important;}.v-application .accent--text { color: #000000 !important; caret-color: #000000 !important;}.v-application .accent.lighten-5 { background-color: #777777 !important; border-color: #777777 !important;}.v-application .accent--text.text--lighten-5 { color: #777777 !important; caret-color: #777777 !important;}.v-application .accent.lighten-4 { background-color: #5e5e5e !important; border-color: #5e5e5e !important;}.v-application .accent--text.text--lighten-4 { color: #5e5e5e !important; caret-color: #5e5e5e !important;}.v-application .accent.lighten-3 { background-color: #474747 !important; border-color: #474747 !important;}.v-application .accent--text.text--lighten-3 { color: #474747 !important; caret-color: #474747 !important;}.v-application .accent.lighten-2 { background-color: #303030 !important; border-color: #303030 !important;}.v-application .accent--text.text--lighten-2 { color: #303030 !important; caret-color: #303030 !important;}.v-application .accent.lighten-1 { background-color: #1b1b1b !important; border-color: #1b1b1b !important;}.v-application .accent--text.text--lighten-1 { color: #1b1b1b !important; caret-color: #1b1b1b !important;}.v-application .accent.darken-1 { background-color: #000000 !important; border-color: #000000 !important;}.v-application .accent--text.text--darken-1 { color: #000000 !important; caret-color: #000000 !important;}.v-application .accent.darken-2 { background-color: #000000 !important; border-color: #000000 !important;}.v-application .accent--text.text--darken-2 { color: #000000 !important; caret-color: #000000 !important;}.v-application .accent.darken-3 { background-color: #000000 !important; border-color: #000000 !important;}.v-application .accent--text.text--darken-3 { color: #000000 !important; caret-color: #000000 !important;}.v-application .accent.darken-4 { background-color: #000000 !important; border-color: #000000 !important;}.v-application .accent--text.text--darken-4 { color: #000000 !important; caret-color: #000000 !important;}.v-application .error { background-color: #ff5252 !important; border-color: #ff5252 !important;}.v-application .error--text { color: #ff5252 !important; caret-color: #ff5252 !important;}.v-application .error.lighten-5 { background-color: #ffe4d5 !important; border-color: #ffe4d5 !important;}.v-application .error--text.text--lighten-5 { color: #ffe4d5 !important; caret-color: #ffe4d5 !important;}.v-application .error.lighten-4 { background-color: #ffc6b9 !important; border-color: #ffc6b9 !important;}.v-application .error--text.text--lighten-4 { color: #ffc6b9 !important; caret-color: #ffc6b9 !important;}.v-application .error.lighten-3 { background-color: #ffa99e !important; border-color: #ffa99e !important;}.v-application .error--text.text--lighten-3 { color: #ffa99e !important; caret-color: #ffa99e !important;}.v-application .error.lighten-2 { background-color: #ff8c84 !important; border-color: #ff8c84 !important;}.v-application .error--text.text--lighten-2 { color: #ff8c84 !important; caret-color: #ff8c84 !important;}.v-application .error.lighten-1 { background-color: #ff6f6a !important; border-color: #ff6f6a !important;}.v-application .error--text.text--lighten-1 { color: #ff6f6a !important; caret-color: #ff6f6a !important;}.v-application .error.darken-1 { background-color: #df323b !important; border-color: #df323b !important;}.v-application .error--text.text--darken-1 { color: #df323b !important; caret-color: #df323b !important;}.v-application .error.darken-2 { background-color: #bf0025 !important; border-color: #bf0025 !important;}.v-application .error--text.text--darken-2 { color: #bf0025 !important; caret-color: #bf0025 !important;}.v-application .error.darken-3 { background-color: #9f0010 !important; border-color: #9f0010 !important;}.v-application .error--text.text--darken-3 { color: #9f0010 !important; caret-color: #9f0010 !important;}.v-application .error.darken-4 { background-color: #800000 !important; border-color: #800000 !important;}.v-application .error--text.text--darken-4 { color: #800000 !important; caret-color: #800000 !important;}.v-application .info { background-color: #ff5252 !important; border-color: #ff5252 !important;}.v-application .info--text { color: #ff5252 !important; caret-color: #ff5252 !important;}.v-application .info.lighten-5 { background-color: #ffe4d5 !important; border-color: #ffe4d5 !important;}.v-application .info--text.text--lighten-5 { color: #ffe4d5 !important; caret-color: #ffe4d5 !important;}.v-application .info.lighten-4 { background-color: #ffc6b9 !important; border-color: #ffc6b9 !important;}.v-application .info--text.text--lighten-4 { color: #ffc6b9 !important; caret-color: #ffc6b9 !important;}.v-application .info.lighten-3 { background-color: #ffa99e !important; border-color: #ffa99e !important;}.v-application .info--text.text--lighten-3 { color: #ffa99e !important; caret-color: #ffa99e !important;}.v-application .info.lighten-2 { background-color: #ff8c84 !important; border-color: #ff8c84 !important;}.v-application .info--text.text--lighten-2 { color: #ff8c84 !important; caret-color: #ff8c84 !important;}.v-application .info.lighten-1 { background-color: #ff6f6a !important; border-color: #ff6f6a !important;}.v-application .info--text.text--lighten-1 { color: #ff6f6a !important; caret-color: #ff6f6a !important;}.v-application .info.darken-1 { background-color: #df323b !important; border-color: #df323b !important;}.v-application .info--text.text--darken-1 { color: #df323b !important; caret-color: #df323b !important;}.v-application .info.darken-2 { background-color: #bf0025 !important; border-color: #bf0025 !important;}.v-application .info--text.text--darken-2 { color: #bf0025 !important; caret-color: #bf0025 !important;}.v-application .info.darken-3 { background-color: #9f0010 !important; border-color: #9f0010 !important;}.v-application .info--text.text--darken-3 { color: #9f0010 !important; caret-color: #9f0010 !important;}.v-application .info.darken-4 { background-color: #800000 !important; border-color: #800000 !important;}.v-application .info--text.text--darken-4 { color: #800000 !important; caret-color: #800000 !important;}.v-application .success { background-color: #ff5252 !important; border-color: #ff5252 !important;}.v-application .success--text { color: #ff5252 !important; caret-color: #ff5252 !important;}.v-application .success.lighten-5 { background-color: #ffe4d5 !important; border-color: #ffe4d5 !important;}.v-application .success--text.text--lighten-5 { color: #ffe4d5 !important; caret-color: #ffe4d5 !important;}.v-application .success.lighten-4 { background-color: #ffc6b9 !important; border-color: #ffc6b9 !important;}.v-application .success--text.text--lighten-4 { color: #ffc6b9 !important; caret-color: #ffc6b9 !important;}.v-application .success.lighten-3 { background-color: #ffa99e !important; border-color: #ffa99e !important;}.v-application .success--text.text--lighten-3 { color: #ffa99e !important; caret-color: #ffa99e !important;}.v-application .success.lighten-2 { background-color: #ff8c84 !important; border-color: #ff8c84 !important;}.v-application .success--text.text--lighten-2 { color: #ff8c84 !important; caret-color: #ff8c84 !important;}.v-application .success.lighten-1 { background-color: #ff6f6a !important; border-color: #ff6f6a !important;}.v-application .success--text.text--lighten-1 { color: #ff6f6a !important; caret-color: #ff6f6a !important;}.v-application .success.darken-1 { background-color: #df323b !important; border-color: #df323b !important;}.v-application .success--text.text--darken-1 { color: #df323b !important; caret-color: #df323b !important;}.v-application .success.darken-2 { background-color: #bf0025 !important; border-color: #bf0025 !important;}.v-application .success--text.text--darken-2 { color: #bf0025 !important; caret-color: #bf0025 !important;}.v-application .success.darken-3 { background-color: #9f0010 !important; border-color: #9f0010 !important;}.v-application .success--text.text--darken-3 { color: #9f0010 !important; caret-color: #9f0010 !important;}.v-application .success.darken-4 { background-color: #800000 !important; border-color: #800000 !important;}.v-application .success--text.text--darken-4 { color: #800000 !important; caret-color: #800000 !important;}.v-application .warning { background-color: #ff5252 !important; border-color: #ff5252 !important;}.v-application .warning--text { color: #ff5252 !important; caret-color: #ff5252 !important;}.v-application .warning.lighten-5 { background-color: #ffe4d5 !important; border-color: #ffe4d5 !important;}.v-application .warning--text.text--lighten-5 { color: #ffe4d5 !important; caret-color: #ffe4d5 !important;}.v-application .warning.lighten-4 { background-color: #ffc6b9 !important; border-color: #ffc6b9 !important;}.v-application .warning--text.text--lighten-4 { color: #ffc6b9 !important; caret-color: #ffc6b9 !important;}.v-application .warning.lighten-3 { background-color: #ffa99e !important; border-color: #ffa99e !important;}.v-application .warning--text.text--lighten-3 { color: #ffa99e !important; caret-color: #ffa99e !important;}.v-application .warning.lighten-2 { background-color: #ff8c84 !important; border-color: #ff8c84 !important;}.v-application .warning--text.text--lighten-2 { color: #ff8c84 !important; caret-color: #ff8c84 !important;}.v-application .warning.lighten-1 { background-color: #ff6f6a !important; border-color: #ff6f6a !important;}.v-application .warning--text.text--lighten-1 { color: #ff6f6a !important; caret-color: #ff6f6a !important;}.v-application .warning.darken-1 { background-color: #df323b !important; border-color: #df323b !important;}.v-application .warning--text.text--darken-1 { color: #df323b !important; caret-color: #df323b !important;}.v-application .warning.darken-2 { background-color: #bf0025 !important; border-color: #bf0025 !important;}.v-application .warning--text.text--darken-2 { color: #bf0025 !important; caret-color: #bf0025 !important;}.v-application .warning.darken-3 { background-color: #9f0010 !important; border-color: #9f0010 !important;}.v-application .warning--text.text--darken-3 { color: #9f0010 !important; caret-color: #9f0010 !important;}.v-application .warning.darken-4 { background-color: #800000 !important; border-color: #800000 !important;}.v-application .warning--text.text--darken-4 { color: #800000 !important; caret-color: #800000 !important;}</style><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/7b8ec9d.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/25edc65.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/1b7ab17.css" as="style"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/863688a.js" as="script"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/87b7056.css" as="style"><link rel="preload" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/cb42003.js" as="script"><link rel="stylesheet" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/1b7ab17.css"><link rel="stylesheet" href="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/css/87b7056.css"> </head> <body > <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div data-app="true" id="app" class="v-application v-application--is-ltr theme--light" style="font-family:Manrope;"><div class="v-application--wrap"><div tabindex="0" aria-label="Loading" class="vld-overlay is-active is-full-page" style="z-index:999;display:none;"><div class="vld-background" style="background:#fff;opacity:0.5;"></div><div class="vld-icon"><svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" width="65" height="65" stroke="#1976d2"><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".25" cx="18" cy="18" r="18"></circle><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.8s" repeatCount="indefinite"></animateTransform></path></g></g></svg></div></div> <!----> <div class="header-section"><header class="v-sheet theme--light elevation-3 v-toolbar v-app-bar v-app-bar--fixed" style="height:56px;margin-top:0px;transform:translateY(0px);left:0px;right:0px;"><div class="v-toolbar__content" style="height:56px;"><div class="row main-menu"><div role="dialog" class="v-dialog__container"><!----></div> <div role="dialog" class="v-dialog__container"><!----></div> <div class="d-none d-lg-flex d-xl-flex d-md-flex justify-space-between pb-5 col col-12"><div class="d-flex align-center col-md-2 col-lg-1 offset-lg-1 col-4"><a href="/" class="d-flex w-100 nuxt-link-active"><div class="logo d-flex w-100"><div aria-label="Questions & Answers" role="img" class="v-image v-responsive theme--light" style="max-height:50px;"><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></a></div> <!----> <div class="col-md-5 col-lg-5 offset-lg-1 col-4"><button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default primary--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-magnify theme--dark"></i></span></button> <a href="/login" class="v-btn v-btn--contained v-btn--router theme--light v-size--default success"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-message-question-outline theme--light"></i> <span class="d-none d-lg-flex d-xl-flex">Ask Question</span></span></a> <a href="/login" class="v-btn v-btn--depressed v-btn--flat v-btn--outlined v-btn--router theme--light v-size--default success--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-login theme--light"></i><span class="d-none d-lg-flex d-xl-flex">Sign In</span></span></a> <a href="/register" class="v-btn v-btn--depressed v-btn--flat v-btn--outlined v-btn--router theme--light v-size--default info--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-account-plus-outline theme--light"></i><span class="d-none d-lg-flex d-xl-flex">Sign Up</span></span></a></div></div> <nav class="hidden-md-and-up v-navigation-drawer v-navigation-drawer--close v-navigation-drawer--fixed v-navigation-drawer--is-mobile v-navigation-drawer--temporary theme--light" style="height:100vh;top:0px;transform:translateX(-100%);width:256px;"><div class="v-navigation-drawer__content"><div class="v-list v-sheet theme--light"><a href="/" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Home</div></div></a> <!----> <!----> <!----> <!----> <a href="/login" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Sign In</div></div></a> <a href="/register" tabindex="0" router="" class="v-list-item v-list-item--link theme--light"><div class="v-list-item__content"><div class="v-list-item__title">Sign Up</div></div></a> <!----></div></div><div class="v-navigation-drawer__border"></div></nav> <header class="hidden-md-and-up v-sheet theme--light v-toolbar v-app-bar v-app-bar--fixed" style="height:56px;margin-top:0px;transform:translateY(0px);left:0px;right:0px;"><div class="v-toolbar__content" style="height:56px;"><div class="row align-center"><button type="button" class="v-app-bar__nav-icon v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu theme--light"></i></span></button> <div class="d-flex col-10 pr-0 align-center justify-end"><button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default primary--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-magnify theme--dark"></i></span></button> <a href="/login" class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--router theme--light v-size--default success--text"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-message-question-outline theme--light"></i></span></a> <div class="col-sm-3 col-md-3 col-4"><a href="/" class="nuxt-link-active"><div class="logo d-flex w-100"><div aria-label="Questions & Answers" role="img" class="v-image v-responsive theme--light" style="max-height:50px;"><div class="v-responsive__sizer" style="padding-bottom:100%;"></div><div class="v-image__image v-image__image--preload v-image__image--contain" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></a></div></div></div></div></header></div></div></header></div> <div class="container"><!----> <div class="flex"><ul itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList" class="v-breadcrumbs v-breadcrumbs--large theme--light"><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="/" itemprop="item" class="v-breadcrumbs__item nuxt-link-active"><span itemprop="name">Home</span></a> <meta content="1" itemprop="position"></li><li class="v-breadcrumbs__divider">></li><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="/forum/technology-and-gadgets" itemprop="item" class="v-breadcrumbs__item"><span itemprop="name">Technology and Gadgets</span></a> <meta content="2" itemprop="position"></li><li class="v-breadcrumbs__divider">></li><li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem"><a href="#" itemprop="item" class="v-breadcrumbs__item v-breadcrumbs__item--disabled"><span itemprop="name">How to create a CSS grid layout?</span></a> <meta content="3" itemprop="position"></li></ul></div> <div class="row mx-0 mt-1"><div class="flex md4 lg3 xl2"><div><div class="row d-md-none justify-space-around"><div class="py-0 col-sm-10 col-md-8 col-12"><div class="px-1 transparent v-sheet theme--light"><div class="v-item-group theme--light v-slide-group v-chip-group"><div class="v-slide-group__prev v-slide-group__prev--disabled"><!----></div><div class="v-slide-group__wrapper"><div class="v-slide-group__content"><a href="/forum/technology-and-gadgets" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default primary--text"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Technology and Gadgets </span></a><a href="/forum/entertainment-and-media" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Entertainment and Media </span></a><a href="/forum/sports-and-fitness" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Sports and Fitness </span></a><a href="/forum/health-and-wellness" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Health and Wellness </span></a><a href="/forum/gaming" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Gaming </span></a><a href="/forum/business-and-finance" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Business and Finance </span></a><a href="/forum/pets-and-animals" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Pets and Animals </span></a><a href="/forum/home-and-garden" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Home & Garden </span></a><a href="/forum/job-and-career" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Job & Career </span></a><a href="/forum/qanda" tabindex="0" draggable="false" router="" class="v-chip v-chip--clickable v-chip--link v-chip--no-color theme--light v-size--default"><span class="v-chip__content"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i> Q&A </span></a></div></div><div class="v-slide-group__next v-slide-group__next--disabled"><!----></div></div></div></div></div> <div class="row d-none d-lg-flex d-xl-flex d-md-flex pr-3"><div class="w-100 v-card v-sheet theme--light"><header class="v-sheet theme--dark v-toolbar info" style="height:56px;"><div class="v-toolbar__content" style="height:56px;"><div class="v-toolbar__title">Category</div></div></header> <div style="max-height:800px;overflow-y:auto;"><div><a href="/forum/technology-and-gadgets" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Technology and Gadgets </div></a></div><div><a href="/forum/entertainment-and-media" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Entertainment and Media </div></a></div><div><a href="/forum/sports-and-fitness" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Sports and Fitness </div></a></div><div><a href="/forum/health-and-wellness" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Health and Wellness </div></a></div><div><a href="/forum/gaming" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Gaming </div></a></div><div><a href="/forum/business-and-finance" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Business and Finance </div></a></div><div><a href="/forum/pets-and-animals" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Pets and Animals </div></a></div><div><a href="/forum/home-and-garden" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Home & Garden </div></a></div><div><a href="/forum/job-and-career" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Job & Career </div></a></div><div><a href="/forum/qanda" tabindex="0" router="" class="word-break v-list-item v-list-item--link theme--light"><div class="v-list-item__icon"><i aria-hidden="true" class="v-icon notranslate mr-1 mdi mdi-comment-multiple-outline theme--light"></i></div> <div class="v-list-item__title"> Q&A </div></a></div></div></div> <!----></div></div></div> <div class="flex pl-lg-4 pl-md-4 pl-xl-4 md8 lg9 xl10"><div class="flex"><div itemscope="itemscope" itemtype="http://schema.org/DiscussionForumPosting" class="row"><div class="col-sm-12 col-md-8 col-lg-8 col-12"><h1 itemprop="headline">How to create a CSS grid layout?</h1></div> <div class="text-md-right text-center col-sm-12 col-md-4 col-lg-4 col-12"><!----> <!----> <button type="button" class="v-btn v-btn--contained theme--dark v-size--default primary"><span class="v-btn__content">New message </span></button></div></div> <div role="dialog" class="v-dialog__container"><!----></div> <div class="row"><div class="col col-12"><div class="v-card v-sheet theme--light"><div role="list" class="v-list v-sheet theme--light"><div tabindex="-1" role="listitem" class="v-list-item theme--light"><div class="row thread-row" data-v-3262fcae><!----> <!----> <!----> <!----> <!----> <div class="row mx-3" data-v-3262fcae data-v-3262fcae><div class="col-sm-3 col-md-3 col-lg-2 col-xl-1 col-12" data-v-3262fcae data-v-3262fcae><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-3262fcae><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="christy_rodriguez" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Member</p> <div><a href="/profile/christy_rodriguez" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> christy_rodriguez </p></a></div> <!----></div></div> <div class="py-0 col-sm-9 col-md-9 col-lg-10 col-xl-11 col-12" data-v-3262fcae data-v-3262fcae><!----> <div class="py-0 col col-12" data-v-3262fcae data-v-3262fcae><span class="caption" data-v-3262fcae>by <a href="/profile/christy_rodriguez" class="d-inline-flex caption" data-v-3262fcae> christy_rodriguez </a></span>, <span class="caption" data-v-3262fcae>in category: </span> <span class="caption" data-v-3262fcae><a href="/forum/technology-and-gadgets" class="d-inline-flex caption" data-v-3262fcae> Technology and Gadgets </a></span>, <span class="caption" data-v-3262fcae>a year ago</span></div> <!----> <!----></div> <div class="col col-12" data-v-3262fcae data-v-3262fcae><div class="forum-text ql-viewer" data-v-3262fcae><p>How to create a CSS grid layout?</p></div> <div class="d-flex justify-start flex-wrap flex-lg-nowrap flex-md-nowrap flex-xl-nowrap flex-sm-nowrap" data-v-3262fcae><div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-3262fcae data-v-3262fcae><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-3262fcae><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF5252;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="12 likes" class="like-dislike-buttons__count" data-v-0348114a>12</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="no dislikes" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">12</span></span></span></div></div> <div class="col-sm-7 col-md-8 col-lg-10 col-xl-10 col-12" data-v-3262fcae data-v-3262fcae><div class="justify-center icons d-flex col col-12" data-v-11d4c0a4 data-v-11d4c0a4 data-v-3262fcae><a href="https://www.facebook.com/sharer.php?src=sp&u=https%3A%2F%2Fforum.elvanco.com%2Fthread%2Fhow-to-create-a-css-grid-layout&quote=How%20to%20%23create%20a%20CSS%20%23grid%20%23layout%3F&hashtag=%23gridlayout" rel="nofollow noopener" target="_blank" title="Facebook" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/fb.png" width="32" height="32" alt="Facebook" data-v-11d4c0a4></a> <!----> <!----> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fforum.elvanco.com%2Fthread%2Fhow-to-create-a-css-grid-layout&text=How%20to%20%23create%20a%20CSS%20%23grid%20%23layout%3F&hashtags=gridlayout,markup,mywebforum" rel="nofollow noopener" target="_blank" title="Twitter" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/twitter.png" width="32" height="32" alt="Twitter" data-v-11d4c0a4></a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fforum.elvanco.com%2Fthread%2Fhow-to-create-a-css-grid-layout" rel="nofollow noopener" target="_blank" title="LinkedIn" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/linkedin.png" width="32" height="32" alt="LinkedIn" data-v-11d4c0a4></a> <a href="https://telegram.me/share/url?url=https%3A%2F%2Fforum.elvanco.com%2Fthread%2Fhow-to-create-a-css-grid-layout" rel="nofollow noopener" target="_blank" title="Telegram" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/telegram.png" width="32" height="32" alt="Telegram" data-v-11d4c0a4></a> <a href="https://api.whatsapp.com/send?text=https%3A%2F%2Fforum.elvanco.com%2Fthread%2Fhow-to-create-a-css-grid-layout" rel="nofollow noopener" target="_blank" title="Whatsapp" data-v-11d4c0a4><img src="https://forum-static.fra1.cdn.digitaloceanspaces.com/assets/images/icons/32/whatsapp.png" width="32" height="32" alt="Whatsapp" data-v-11d4c0a4></a> <!----></div></div></div> <div class="row py-0" data-v-3262fcae data-v-3262fcae><div class="text-center col" data-v-3262fcae data-v-3262fcae><a href="/tag/gridlayout" draggable="false" class="mr-2 mb-1 v-chip v-chip--clickable v-chip--label v-chip--link v-chip--outlined v-chip--pill theme--light v-size--small secondary secondary--text" data-v-3262fcae><span class="v-chip__content"><span class="secondary--text text-decoration-none font-weight-bold" data-v-3262fcae><i aria-hidden="true" class="v-icon notranslate mx-0 v-icon--left mdi mdi-pound theme--light secondary--text" style="font-size:16px;" data-v-3262fcae></i>gridlayout </span></span></a><a href="/tag/markup" draggable="false" class="mr-2 mb-1 v-chip v-chip--clickable v-chip--label v-chip--link v-chip--outlined v-chip--pill theme--light v-size--small secondary secondary--text" data-v-3262fcae><span class="v-chip__content"><span class="secondary--text text-decoration-none font-weight-bold" data-v-3262fcae><i aria-hidden="true" class="v-icon notranslate mx-0 v-icon--left mdi mdi-pound theme--light secondary--text" style="font-size:16px;" data-v-3262fcae></i>markup </span></span></a><a href="/tag/grid" draggable="false" class="mr-2 mb-1 v-chip v-chip--clickable v-chip--label v-chip--link v-chip--outlined v-chip--pill theme--light v-size--small secondary secondary--text" data-v-3262fcae><span class="v-chip__content"><span class="secondary--text text-decoration-none font-weight-bold" data-v-3262fcae><i aria-hidden="true" class="v-icon notranslate mx-0 v-icon--left mdi mdi-pound theme--light secondary--text" style="font-size:16px;" data-v-3262fcae></i>grid </span></span></a><a href="/tag/layout" draggable="false" class="mr-2 mb-1 v-chip v-chip--clickable v-chip--label v-chip--link v-chip--outlined v-chip--pill theme--light v-size--small secondary secondary--text" data-v-3262fcae><span class="v-chip__content"><span class="secondary--text text-decoration-none font-weight-bold" data-v-3262fcae><i aria-hidden="true" class="v-icon notranslate mx-0 v-icon--left mdi mdi-pound theme--light secondary--text" style="font-size:16px;" data-v-3262fcae></i>layout </span></span></a><a href="/tag/create" draggable="false" class="mr-2 mb-1 v-chip v-chip--clickable v-chip--label v-chip--link v-chip--outlined v-chip--pill theme--light v-size--small secondary secondary--text" data-v-3262fcae><span class="v-chip__content"><span class="secondary--text text-decoration-none font-weight-bold" data-v-3262fcae><i aria-hidden="true" class="v-icon notranslate mx-0 v-icon--left mdi mdi-pound theme--light secondary--text" style="font-size:16px;" data-v-3262fcae></i>create </span></span></a></div></div></div></div> <!----> <!----></div></div> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <h4 class="my-4 pl-4 text-capitalize"> 1 answer </h4> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <div tabindex="-1" role="listitem" class="v-list-item theme--light"><!----> <div class="row post-row" data-v-145a8bfc data-v-145a8bfc><!----> <!----> <!----> <!----> <!----> <div class="col-sm-3 col-md-2 col-lg-1 col-12" data-v-145a8bfc data-v-145a8bfc><div itemscope="itemscope" itemtype="http://schema.org/Person" class="avatar text-center" data-v-145a8bfc><div><div class="v-avatar" style="height:50px;min-width:50px;width:50px;"><div aria-label="isabelle" role="img" class="v-image v-responsive theme--light"><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div></div> <p class="my-0 caption">Member</p> <div><a href="/profile/isabelle" class="d-inline-flex"><p itemprop="name" class="subtitle-2 mb-0"> isabelle </p></a></div> <!----></div></div> <div class="col-sm-9 col-md-10 col-lg-11 col-12" data-v-145a8bfc data-v-145a8bfc><div class="pt-0 col col-12" data-v-145a8bfc data-v-145a8bfc><span class="caption" data-v-145a8bfc>by <a href="/profile/isabelle" class="d-inline-flex caption" data-v-145a8bfc> isabelle </a></span>, <span class="caption" data-v-145a8bfc>a year ago</span></div> <div class="forum-text ql-viewer" data-v-145a8bfc><p><span class="mention"><span><span><span class="mention"><span><span><span class="ql-mention-denotation-char">@</span>christy_rodriguez</span></span></span> </span> </span></span></p><p>To create a CSS grid layout, follow these steps:</p><p><br/></p><p>Step 1: Define a grid container</p><ul><li>Start by selecting an HTML element to use as the grid container. This can be any block-level element such as a </li><li><strong>In your CSS, use the display</strong>: grid; or display: inline-grid; property on the selected element to create a grid container.</li></ul><p><br/></p><p>Step 2: Define grid columns and rows</p><ul><li>Specify the number and size of the columns and rows you want in your grid layout.</li><li>Use the grid-template-columns property to define the width of each column, and the grid-template-rows property to define the height of each row.</li><li>You can specify the size for each column and row using various units such as pixels, percentages, or the fr unit.</li></ul><p><br/></p><p>Step 3: Place grid items</p><ul><li>Decide how you want to position and place your grid items within the defined columns and rows.</li><li>Use the grid-column and grid-row properties on the grid items to specify the starting and ending position within the grid.</li><li>You can also use the grid-area property to give named areas in the grid and assign items to those named areas.</li></ul><p><br/></p><p>Step 4: Additional grid properties (optional)</p><ul><li>CSS grid provides various additional properties that allow you to control the spacing, alignment, and sizing of your grid layout.</li><li>Some of these properties include grid-gap to control the spacing between grid items, justify-items and align-items to align items within the cells, and justify-content and align-content to align and justify the grid tracks.</li></ul><p><br/></p><p>Step 5: Apply the grid layout</p><ul><li>Make sure to apply the CSS grid layout to your HTML markup by adding the appropriate class or ID selectors to the grid container and grid items.</li><li>You can also use nested grid containers to create more complex grid layouts.</li></ul><p><br/></p><p>Example:</p><p><br/></p><p>HTML:</p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">8</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div></div></pre></td></tr></tbody></table></div><p><br/></p><p>CSS:</p><div style="color:#f8f8f2;background-color:#272822;"><table style="border-spacing:0;padding:0;margin:0;border:0;"><tbody><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;"><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11</span></pre></td><td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;">.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */ grid-template-rows: 100px 200px; /* Two rows with specified heights */ grid-gap: 20px; /* Spacing between grid items */} .grid-item { background-color: #ddd; padding: 10px;}</pre></td></tr></tbody></table></div><p><br/></p><p>This example creates a grid container with three equal columns and two rows of specified heights. The grid items inside the container have a background color and padding. The grid gap property adds a 20px spacing between the grid items.</p></div></div> <!----> <div class="text-center text-lg-left text-md-left text-xl-left text-sm-left col-sm-5 col-md-4 col-lg-2 col-xl-2 col-12" data-v-145a8bfc data-v-145a8bfc><div class="like-dislike-buttons pt-3" data-v-0348114a data-v-145a8bfc><span class="v-badge v-badge--overlap theme--light" data-v-0348114a><span draggable="false" class="v-chip v-chip--outlined theme--light v-size--default info info--text" data-v-0348114a><span class="v-chip__content"><div class="d-flex justify-center" style="--primary-color:#FF5252;" data-v-0348114a><a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-up theme--light" data-v-0348114a></i> <small title="no likes" class="like-dislike-buttons__count" data-v-0348114a>0</small></a> <span class="separator" data-v-0348114a>|</span> <a href="#" class="like-dislike-buttons__btn" data-v-0348114a><i aria-hidden="true" class="v-icon notranslate mdi mdi-thumb-down theme--light" data-v-0348114a></i> <small title="no dislikes" class="like-dislike-buttons__count" data-v-0348114a>0</small></a></div></span></span><span class="v-badge__wrapper"><span aria-atomic="true" aria-label="Badge" aria-live="polite" role="status" class="v-badge__badge error" style="bottom:calc(100% - 12px);left:calc(100% - 12px);right:auto;top:auto;">0</span></span></span></div></div> <!----> <div class="col col-12" data-v-145a8bfc data-v-145a8bfc><!----></div></div></div> <!----></div></div></div></div> <div class="d-flex justify-space-between flex-wrap flex-lg-nowrap flex-md-nowrap flex-xl-nowrap flex-sm-nowrap"><nav role="navigation" aria-label="Pagination Navigation" class="w-100"><ul class="v-pagination theme--light"><li><button type="button" aria-label="Previous page" class="v-pagination__navigation v-pagination__navigation--disabled"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-left theme--light"></i></button></li><li><button type="button" aria-current="true" aria-label="Current Page, Page 1" class="v-pagination__item v-pagination__item--active primary">1</button></li><li><button type="button" aria-label="Next page" class="v-pagination__navigation v-pagination__navigation--disabled"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-right theme--light"></i></button></li></ul></nav> <div class="mx-auto col-sm-2 col-md-3 col-lg-2 col-xl-1 col-6"><div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-select"><div class="v-input__control"><div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-215321231" class="v-input__slot"><div class="v-select__slot"><label for="input-215321231" class="v-label v-label--active theme--light" style="left:0px;right:auto;position:absolute;">Rows per page</label><div class="v-select__selections"><div class="v-select__selection v-select__selection--comma">15</div><input id="input-215321231" readonly="readonly" type="text" aria-readonly="false" autocomplete="off"></div><div class="v-input__append-inner"><div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light"></i></div></div><input type="hidden" value="15"></div><div class="v-menu"><!----></div></div><div class="v-text-field__details"><div class="v-messages theme--light"><div class="v-messages__wrapper"></div></div></div></div></div></div></div> <div class="row mt-2"><div class="col col-12"><h2 class="display-1">Related Threads:</h2></div> <div class="col col-12"><div class="mx-auto v-card v-sheet theme--light"><div role="list" class="v-list v-sheet theme--light v-list--two-line"><!----> <a href="/thread/how-to-create-a-responsive-layout-with-css" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">How to create a responsive layout with CSS?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/how-to-use-css3-grid-for-layout" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">How to use CSS3 grid for layout?</div></div></a><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light"> <a href="/thread/how-to-use-flexbox-for-layout-in-css" tabindex="0" role="listitem" class="v-list-item v-list-item--link theme--light"><div class="v-avatar v-list-item__avatar v-list-item__avatar--horizontal rounded-0 v-avatar--tile" style="height:90px;min-width:90px;width:90px;"></div> <div class="v-list-item__content"><div class="v-list-item__title">How to use Flexbox for layout in CSS?</div></div></a></div></div></div></div></div></div></div></div> <div pages="" class="footer" data-v-600bef70><!----> <footer class="v-footer footer mt-4 v-sheet theme--light" data-v-600bef70><!----> <!----> <div class="flex xs12 sm12 md6 lg4" data-v-600bef70><div class="about-section white-text mx-auto" data-v-600bef70><h4 class="title text-center" data-v-600bef70>About us</h4> <ul class="text-center pr-6" data-v-600bef70><li data-v-600bef70><a href="/contact" rel="nofollow" data-v-600bef70>Contact us</a></li></ul></div></div> <div class="flex xs12 text-center mt-2" data-v-600bef70><span data-v-600bef70>© 2025 Copyright: forum.elvanco.com </span> <p class="mb-0" data-v-600bef70> This Site is Created By <a href="https://mywebforum.com" target="_blank" data-v-600bef70>mywebforum.com</a></p> <p data-v-600bef70> Get Your Own <a href="https://mywebforum.com" target="_blank" data-v-600bef70>Questions & Answers platform</a></p></div></footer> <!----> <!----></div> <!----> <div class="js-scripts"></div></div></div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az,aA,aB,aC,aD,aE,aF,aG,aH,aI,aJ,aK,aL,aM,aN,aO,aP,aQ,aR,aS,aT,aU,aV,aW,aX,aY,aZ,a_,a$,ba,bb,bc,bd,be,bf,bg,bh,bi,bj,bk,bl,bm,bn,bo,bp,bq,br,bs,bt,bu){ai.id=O;ai.name=t;ai.messages=1085;ai.threads=956;ai.meta_title=t;ai.meta_description=P;ai.children=e;ai.icon=c;ai.is_public=b;ai.last_post={id:177096,message:"\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E",is_moderated:d,username:"rajsharma120195",user_active:a,created:"2024-03-06T11:15:06Z"};ai.order=a;ai.description=P;ai.slug=aa;aj.id=69015;aj.name=ak;aj.messages=276;aj.threads=209;aj.meta_title=ak;aj.meta_description=al;aj.children=e;aj.icon=c;aj.is_public=b;aj.last_post={id:177749,message:"\u003Cp\u003E\u003Cspan style=\"color: rgb(13, 13, 13);\"\u003EWhat makes Paris an unforgettable travel destination for visitors?\u003C\u002Fspan\u003E\u003C\u002Fp\u003E",is_moderated:d,username:"K Sowjanya",user_active:a,created:"2024-03-13T06:55:31Z"};aj.order=a;aj.description=al;aj.slug="entertainment-and-media";am.id=69016;am.name=an;am.messages=232;am.threads=207;am.meta_title=an;am.meta_description=ao;am.children=e;am.icon=c;am.is_public=b;am.last_post={id:209284,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Egabe_frami\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003ESharpening ice hockey skates at home requires a few specialized tools and some knowledge of the sharpening process. Here are the steps to sharpen ice hockey skates at home:\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EGather the necessary tools\u003C\u002Fstrong\u003E: You will need a skate sharpening jig, a sharpening stone or a grinding wheel, a flat file, and a cloth.\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003ESecure the skates\u003C\u002Fstrong\u003E: Place the skates securely in the sharpening jig, ensuring they are stable and won't move during the sharpening process.\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EAssess the blade\u003C\u002Fstrong\u003E: Examine the blade carefully to identify any nicks or dents. Remove any visible rust or dirt from the blade using a cloth.\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EBegin sharpening\u003C\u002Fstrong\u003E: Start by running the sharpening stone or grinding wheel along the length of the blade in a smooth, consistent motion. Apply even pressure and try to maintain the skate's original hollow radius (the curve of the blade).\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EMaintain the angle\u003C\u002Fstrong\u003E: The angle at which the stone or wheel is held against the blade is crucial. Most ice hockey skates have a standard pitch of 90 degrees. However, some skaters prefer a different angle, so it's important to check the manufacturer's recommendations or consult with an experienced sharpener to determine the right angle for your skates.\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003ESharpen evenly\u003C\u002Fstrong\u003E: Make sure to sharpen both edges of the skate blade evenly by counting the number of strokes or checking for equal removal of material on each side.\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EDe-burr the blade\u003C\u002Fstrong\u003E: After sharpening, use the flat file to de-burr the edges of the blade. Hold the flat file at a 45-degree angle and run it along the length of the blade to smooth out any burrs or rough spots.\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EClean the skates\u003C\u002Fstrong\u003E: Use a cloth to wipe away any metal shavings or residue left on the skates. This will also help remove any excess water or moisture.\n\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003ETest the skates\u003C\u002Fstrong\u003E: Put on the skates and test them on the ice to ensure they are sharpened to your satisfaction. If necessary, make adjustments accordingly.\n\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EIt's important to note that sharpening skates is a skill that takes practice and experience to master. If you're a beginner or unsure about sharpening skates at home, it may be safer to take them to a professional skate sharpener.\u003C\u002Fp\u003E",is_moderated:d,username:"myriam",user_active:a,created:"2024-01-10T22:59:23Z"};am.order=a;am.description=ao;am.slug="sports-and-fitness";ap.id=69017;ap.name=aq;ap.messages=148;ap.threads=149;ap.meta_title=aq;ap.meta_description=ar;ap.children=e;ap.icon=c;ap.is_public=b;ap.last_post={id:210810,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Ebrandyn\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EThe perceived "better" state between Minnesota and Colorado often depends on personal preferences and priorities. Both states have their own unique characteristics and offer diverse experiences.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EMinnesota, known as the "Land of 10,000 Lakes," boasts abundant natural beauty, with numerous lakes and forests, making it a popular destination for outdoor activities such as fishing, boating, and hiking. It is also home to the vibrant city of Minneapolis, which is known for its arts and cultural scene, as well as being a hub for business and technology.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EColorado, on the other hand, is famous for its stunning Rocky Mountains, offering unparalleled opportunities for skiing, snowboarding, and mountaineering. The state is also renowned for its outdoor recreational activities like hiking, biking, and white-water rafting. Additionally, Colorado has several thriving cities, including Denver, which is known for its arts, craft breweries, and vibrant music scene.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EUltimately, the choice between these two states depends on individual preferences, such as climate, outdoor activities, cultural offerings, and career opportunities. It is recommended to visit both states or conduct thorough research to determine which one aligns better with your interests and lifestyle.\u003C\u002Fp\u003E",is_moderated:d,username:"al_huels",user_active:a,created:"2024-01-22T19:05:55Z"};ap.order=a;ap.description=ar;ap.slug="health-and-wellness";as.id=69018;as.name=at;as.messages=193;as.threads=143;as.meta_title=at;as.meta_description=au;as.children=e;as.icon=c;as.is_public=b;as.last_post={id:199453,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Eelza.bogan\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003ETo join a Roblox group, follow these steps:\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003EOpen the Roblox website or mobile app and log in to your account.\u003C\u002Fli\u003E\u003Cli\u003EIn the main menu, click on the "Groups" tab. This will open the Groups section.\u003C\u002Fli\u003E\u003Cli\u003EBrowse through the available groups or use the search bar to find a specific group you wish to join.\u003C\u002Fli\u003E\u003Cli\u003EOnce you find a group you want to join, click on it to open its group page.\u003C\u002Fli\u003E\u003Cli\u003EOn the group page, you will see an option to "Join Group" or "Request to Join". Click on this button.\u003C\u002Fli\u003E\u003Cli\u003EIf the group is open to join, you will instantly become a member. If the group requires approval, you will have to wait for the group owner or administration to accept your request.\u003C\u002Fli\u003E\u003Cli\u003EOnce accepted, you will receive a notification, and you will be able to access the group's features and participate in its activities.\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003ENote: Some groups may have specific requirements or restrictions, such as minimum age or specific achievements, so make sure to read any group guidelines or rules before joining.\u003C\u002Fp\u003E",is_moderated:d,username:av,user_active:a,created:"2023-11-29T20:40:19Z"};as.order=a;as.description=au;as.slug="gaming";aw.id=69019;aw.name=ax;aw.messages=305;aw.threads=291;aw.meta_title=ax;aw.meta_description=ay;aw.children=e;aw.icon=c;aw.is_public=b;aw.last_post={id:257811,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Equinton_ondricka\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003EReferral codes for a Tesla Model S can typically be found on the Tesla website, social media pages, or through current Tesla owners who may have referral codes to share. You can also check with Tesla representatives or at Tesla events to see if they have any current promotions or referral codes available. Additionally, there are online forums and groups where Tesla owners and enthusiasts share referral codes with each other.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EYou can use my referral link as well: \u003Ca href=\"https:\u002F\u002Fwww.tesla.com\u002Freferral\u002Fdmitry602081\" rel=\"noopener noreferrer nofollow\" target=\"_blank\"\u003Ehttps:\u002F\u002Fwww.tesla.com\u002Freferral\u002Fdmitry602081\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EWelcome to the Tesla Family 🙃\u003C\u002Fp\u003E",is_moderated:d,username:av,user_active:a,created:"2024-12-09T13:24:35Z"};aw.order=a;aw.description=ay;aw.slug="business-and-finance";az.id=69020;az.name=aA;az.messages=201;az.threads=176;az.meta_title=aA;az.meta_description=aB;az.children=e;az.icon=c;az.is_public=b;az.last_post={id:199777,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Emaeve\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EPet chinchillas should be housed in spacious enclosures that provide them with plenty of room to move, jump, and play. A multilevel cage with wire mesh sides is ideal, as it allows for good ventilation. The minimum dimensions for a chinchilla cage should be approximately 2 feet by 2 feet by 3 feet, but larger enclosures are always preferred.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EThe flooring of the cage should be solid, as wire mesh can be harmful to their delicate feet. A solid plastic or metal tray is recommended, with bedding such as wood shavings or specialized chinchilla bedding to provide comfort.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EChinchillas are very active and require multiple levels or platforms in their cage. These platforms should be solidly built and should have ramps or ladders leading to them. Including a small wooden house or hiding spot in the cage can provide them with a sense of security.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EAdditionally, chinchillas should have access to an exercise wheel, preferably one with a solid surface to prevent injury. They also appreciate having various toys such as wooden chew toys, tunnels, and branches in their cage to keep them mentally stimulated.\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EIt is important to keep in mind that chinchillas are sensitive to high temperatures, so their housing should be kept in a cool area of the house, away from direct sunlight and drafts.\u003C\u002Fp\u003E",is_moderated:d,username:"vincenza",user_active:a,created:"2023-12-01T01:02:33Z"};az.order=a;az.description=aB;az.slug="pets-and-animals";aC.id=75094;aC.name="Home & Garden";aC.messages=85;aC.threads=84;aC.meta_title=aD;aC.meta_description="Connect with fellow enthusiasts and experts in the realm of gardening, interior design, DIY projects, and more.";aC.children=e;aC.icon=c;aC.is_public=b;aC.last_post={id:209928,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Edrew\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003EThe lifespan of an electric grill can vary depending on a number of factors such as the quality of the grill, how well it is maintained, and how often it is used. On average, an electric grill can last anywhere from 5 to 10 years. However, with proper care and regular maintenance, it is possible for an electric grill to last even longer.\u003C\u002Fp\u003E",is_moderated:d,username:"brigitte.graham",user_active:a,created:"2024-01-14T05:50:16Z"};aC.order=a;aC.description=aD;aC.slug="home-and-garden";aE.id=75497;aE.name="Job & Career";aE.messages=118;aE.threads=119;aE.meta_title=aF;aE.meta_description="Explore a world of professional growth, job search strategies, career development, and valuable insights in our Job & Career forum category.";aE.children=e;aE.icon=c;aE.is_public=b;aE.last_post={id:177097,message:"\u003Cp\u003E\u003Cspan style=\"color: rgb(0, 0, 0);\"\u003EI found a good way to talk to an astrologer online for free on the \u003C\u002Fspan\u003E\u003Cstrong\u003EAnytime Astro\u003C\u002Fstrong\u003E\u003Cspan style=\"color: rgb(0, 0, 0);\"\u003E app. It has a \u003C\u002Fspan\u003E\u003Cstrong\u003EChat with an Astrologer for Free\u003C\u002Fstrong\u003E\u003Cspan style=\"color: rgb(0, 0, 0);\"\u003E option, where you can share your worries without paying. Just go to their website, find the free chat option, and talk to experienced astrologers. It's a simple way to get advice without spending money, making it easy to learn about astrology whenever you want.\u003C\u002Fspan\u003E\u003C\u002Fp\u003E",is_moderated:d,username:"johnwilliams140197",user_active:a,created:"2024-03-06T11:21:23Z"};aE.order=a;aE.description=aF;aE.slug="job-and-career";aG.id=96360;aG.name="Q&A";aG.messages=a;aG.threads=30;aG.meta_title=c;aG.meta_description=c;aG.children=e;aG.icon=c;aG.is_public=b;aG.order=a;aG.description=c;aG.slug="qanda";return {layout:$,data:[{sanitizedMessage:h,thread:{id:165577,name:h,message:"\u003Cp\u003EHow to create a CSS grid layout?\u003C\u002Fp\u003E",formatted_message:c,hash_tags:"[\"gridlayout\",\"markup\",\"grid\",\"layout\",\"create\"]",tags:["gridlayout","markup","grid","layout","create","mywebforum"],category:{id:O,name:t,messages:a,threads:a,meta_title:c,meta_description:c,children:e,icon:c,is_public:b,order:a,description:P,slug:aa},category_id:O,slug:ab,likes:12,dislikes:a,is_closed:b,is_pinned:b,is_moderated:d,username:"christy_rodriguez",user_active:f,role:i,user_avatar:"avatar\u002Fchristy_rodriguez\u002F21-2 (1).jpg",created:"2023-11-22T01:12:29Z"},relatedThreads:[{id:165552,title:ac,text:ac,avatar:"avatar\u002Fchaim.ritchie\u002F2759.jpg",role:i,slug:"how-to-create-a-responsive-layout-with-css",username:"chaim.ritchie",created:"2023-11-21T22:44:39Z"},{id:165785,title:ad,text:ad,avatar:"avatar\u002Fcallie\u002F3029.jpg",role:i,slug:"how-to-use-css3-grid-for-layout",username:"callie",created:"2023-11-23T03:06:05Z"},{id:168836,title:ae,text:ae,avatar:"avatar\u002Fyazmin.rodriguez\u002F3067.jpg",role:i,slug:"how-to-use-flexbox-for-layout-in-css",username:"yazmin.rodriguez",created:"2023-12-18T19:07:34Z"}],socialSettings:{id:3206,size:a,facebook:d,vk:b,ok:b,linkedin:d,telegram:d,whatsapp:d,pocket:b,twitter:d,active:d},page:f,totals:f,postsTotal:f,posts:[{id:200594,message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Echristy_rodriguez\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003ETo create a CSS grid layout, follow these steps:\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 1: Define a grid container\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EStart by selecting an HTML element to use as the grid container. This can be any block-level element such as a \u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EIn your CSS, use the display\u003C\u002Fstrong\u003E: grid; or display: inline-grid; property on the selected element to create a grid container.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 2: Define grid columns and rows\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003ESpecify the number and size of the columns and rows you want in your grid layout.\u003C\u002Fli\u003E\u003Cli\u003EUse the grid-template-columns property to define the width of each column, and the grid-template-rows property to define the height of each row.\u003C\u002Fli\u003E\u003Cli\u003EYou can specify the size for each column and row using various units such as pixels, percentages, or the fr unit.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 3: Place grid items\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EDecide how you want to position and place your grid items within the defined columns and rows.\u003C\u002Fli\u003E\u003Cli\u003EUse the grid-column and grid-row properties on the grid items to specify the starting and ending position within the grid.\u003C\u002Fli\u003E\u003Cli\u003EYou can also use the grid-area property to give named areas in the grid and assign items to those named areas.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 4: Additional grid properties (optional)\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003ECSS grid provides various additional properties that allow you to control the spacing, alignment, and sizing of your grid layout.\u003C\u002Fli\u003E\u003Cli\u003ESome of these properties include grid-gap to control the spacing between grid items, justify-items and align-items to align items within the cells, and justify-content and align-content to align and justify the grid tracks.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 5: Apply the grid layout\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EMake sure to apply the CSS grid layout to your HTML markup by adding the appropriate class or ID selectors to the grid container and grid items.\u003C\u002Fli\u003E\u003Cli\u003EYou can also use nested grid containers to create more complex grid layouts.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EExample:\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EHTML:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-fbp5bcv\"\u003E<div class="grid-container">\n <div class="grid-item">1<\u002Fdiv>\n <div class="grid-item">2<\u002Fdiv>\n <div class="grid-item">3<\u002Fdiv>\n <div class="grid-item">4<\u002Fdiv>\n <div class="grid-item">5<\u002Fdiv>\n <div class="grid-item">6<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003ECSS:\u003C\u002Fp\u003E\u003Cpre class=\"code-block ql-syntax\" id=\"code-04hdv62\"\u003E.grid-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr; \u002F* Three equal columns *\u002F\n grid-template-rows: 100px 200px; \u002F* Two rows with specified heights *\u002F\n grid-gap: 20px; \u002F* Spacing between grid items *\u002F\n}\n\n.grid-item {\n background-color: #ddd;\n padding: 10px;\n}\n\u003C\u002Fpre\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EThis example creates a grid container with three equal columns and two rows of specified heights. The grid items inside the container have a background color and padding. The grid gap property adds a 20px spacing between the grid items.\u003C\u002Fp\u003E",formatted_message:"\u003Cp\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"mention\"\u003E\u003Cspan\u003E\u003Cspan\u003E\u003Cspan class=\"ql-mention-denotation-char\"\u003E@\u003C\u002Fspan\u003Echristy_rodriguez\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E \u003C\u002Fspan\u003E \u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003C\u002Fp\u003E\u003Cp\u003ETo create a CSS grid layout, follow these steps:\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 1: Define a grid container\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EStart by selecting an HTML element to use as the grid container. This can be any block-level element such as a \u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EIn your CSS, use the display\u003C\u002Fstrong\u003E: grid; or display: inline-grid; property on the selected element to create a grid container.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 2: Define grid columns and rows\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003ESpecify the number and size of the columns and rows you want in your grid layout.\u003C\u002Fli\u003E\u003Cli\u003EUse the grid-template-columns property to define the width of each column, and the grid-template-rows property to define the height of each row.\u003C\u002Fli\u003E\u003Cli\u003EYou can specify the size for each column and row using various units such as pixels, percentages, or the fr unit.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 3: Place grid items\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EDecide how you want to position and place your grid items within the defined columns and rows.\u003C\u002Fli\u003E\u003Cli\u003EUse the grid-column and grid-row properties on the grid items to specify the starting and ending position within the grid.\u003C\u002Fli\u003E\u003Cli\u003EYou can also use the grid-area property to give named areas in the grid and assign items to those named areas.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 4: Additional grid properties (optional)\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003ECSS grid provides various additional properties that allow you to control the spacing, alignment, and sizing of your grid layout.\u003C\u002Fli\u003E\u003Cli\u003ESome of these properties include grid-gap to control the spacing between grid items, justify-items and align-items to align items within the cells, and justify-content and align-content to align and justify the grid tracks.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EStep 5: Apply the grid layout\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003EMake sure to apply the CSS grid layout to your HTML markup by adding the appropriate class or ID selectors to the grid container and grid items.\u003C\u002Fli\u003E\u003Cli\u003EYou can also use nested grid containers to create more complex grid layouts.\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EExample:\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EHTML:\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E6\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E7\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E8\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E<div class="grid-container">\n <div class="grid-item">1<\u002Fdiv>\n <div class="grid-item">2<\u002Fdiv>\n <div class="grid-item">3<\u002Fdiv>\n <div class="grid-item">4<\u002Fdiv>\n <div class="grid-item">5<\u002Fdiv>\n <div class="grid-item">6<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003ECSS:\u003C\u002Fp\u003E\u003Cdiv style=\"color:#f8f8f2;background-color:#272822;\"\u003E\n\u003Ctable style=\"border-spacing:0;padding:0;margin:0;border:0;\"\u003E\u003Ctbody\u003E\u003Ctr\u003E\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 1\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 2\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 3\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 4\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 5\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 6\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 7\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 8\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E 9\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E10\n\u003C\u002Fspan\u003E\u003Cspan style=\"white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f\"\u003E11\n\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\n\u003Ctd style=\"vertical-align:top;padding:0;margin:0;border:0;;width:100%\"\u003E\n\u003Cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;\"\u003E.grid-container {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr; \u002F* Three equal columns *\u002F\n grid-template-rows: 100px 200px; \u002F* Two rows with specified heights *\u002F\n grid-gap: 20px; \u002F* Spacing between grid items *\u002F\n}\n\n.grid-item {\n background-color: #ddd;\n padding: 10px;\n}\n\u003C\u002Fpre\u003E\u003C\u002Ftd\u003E\u003C\u002Ftr\u003E\u003C\u002Ftbody\u003E\u003C\u002Ftable\u003E\n\u003C\u002Fdiv\u003E\n\u003Cp\u003E\u003Cbr\u002F\u003E\u003C\u002Fp\u003E\u003Cp\u003EThis example creates a grid container with three equal columns and two rows of specified heights. The grid items inside the container have a background color and padding. The grid gap property adds a 20px spacing between the grid items.\u003C\u002Fp\u003E",is_moderated:d,likes:a,dislikes:a,thread_title:h,thread_slug:ab,username:"isabelle",user_avatar:"avatar\u002Fisabelle\u002Ffood004.jpg",user_active:f,role:i,role_logo:c,created:"2023-12-05T01:14:00Z"}]}],fetch:{},error:e,state:{loading:a,settings:{id:14097,name:Q,domain:"forum.elvanco.com",port:80,plan:f,plan_name:"free",footer_code:"\u003C!-- Google tag (gtag.js) --\u003E\n\u003Cscript async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-2MT0BYZ5Q8\"\u003E\u003C\u002Fscript\u003E\n\u003Cscript\u003E\n window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n\n gtag('config', 'G-2MT0BYZ5Q8');\n\u003C\u002Fscript\u003E",robots_txt:"User-agent: *\nDisallow: \u002Fsearch\nDisallow: \u002Fadmin\nDisallow: \u002Fprofile\nDisallow: \u002Flogin\nDisallow: \u002Fregister\n\nSitemap: https:\u002F\u002Fforum.elvanco.com\u002Fsitemap.xml",locale:"en",add_source:f,allow_likes:f,add_watermark:f,add_watermark_position:5,hash:"007e59e4-89a3-4daf-8cf1-0c678fc29352",default_role:af,allow_hash_tags:f,add_source_text:ag,scrollable_pagination:a,meta_title:Q,blog_active:b,favicon_png:"\u002Ffavicon.png",favicon_ico:c,custom_css:".forum-text h2 {\nmargin-top: 10px !important;\n}\n\n.forum-text p { \npadding-bottom: 10px !important;\ndisplay: inline-block;\n}\n\n.forum-text ul,\n.forum-text ol {\nmargin-bottom: 0 !important;\n}\n\n.forum-text ul li p,\n.forum-text ol li p {\nmargin-bottom: 0 !important;\npadding: 0 !important;\n}",meta_description:ah,description:ah,logo:"logo\u002F5.png",is_related_thread:f,related_thread:3,notify_on_moderation:d,activation:"email"},layout:{id:14236,is_dark:a,name:$,background_full:b,code_theme:"monokai",page_transition:"fadeUp",background:c,background_color:c,text_color:c,text_font_family:"Manrope",primary_color:j,secondary_color:"#424242",accent_color:"#000000",info_color:j,success_color:j,error_color:j,warning_color:j},social_providers:{google:d,facebook:d,github:b},menus:[],showAd:b,darkMode:b,isFooterVisible:b,cdnUrl:"https:\u002F\u002Fforum-static.fra1.cdn.digitaloceanspaces.com",metaOg:{title:h,url:"https:\u002F\u002Fforum.elvanco.com\u002Fthread\u002Fhow-to-create-a-css-grid-layout",type:c,image:c,description:h,site_name:Q},itemsPerPage:15,ad:[{id:23,name:"Own domain footer",css_selector:c,position:2,one_time:b,show_every:a,code:"\u003Cdiv id=\"amazon-banner-container\"\u003E\u003C\u002Fdiv\u003E\n\u003Cscript src=\"https:\u002F\u002Fcdn.flashpost.app\u002Fflashpost-banner\u002Famazon-banner.js\"\u003E\u003C\u002Fscript\u003E\n\u003Cscript\u003E\n if (window.AmazonBannerWidget) {\n \u002F\u002F Example with a custom page URL (or remove the second argument to default to current page)\n window.AmazonBannerWidget(\"amazon-banner-container\");\n } else {\n console.error(\"AmazonBannerWidget is not defined. Ensure the script is loaded correctly.\");\n }\n\u003C\u002Fscript\u003E",active:d,free:d},{id:1002,name:"Under menu",css_selector:c,position:11,one_time:b,show_every:a,code:"\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-4833888168110763\"\n crossorigin=\"anonymous\"\u003E\u003C\u002Fscript\u003E\n\u003C!-- forum.elvanco.com --\u003E\n\u003Cins class=\"adsbygoogle\"\n style=\"display:block\"\n data-ad-client=\"ca-pub-4833888168110763\"\n data-ad-slot=\"8373175119\"\n data-ad-format=\"auto\"\n data-full-width-responsive=\"true\"\u003E\u003C\u002Fins\u003E\n\u003Cscript\u003E\n (adsbygoogle = window.adsbygoogle || []).push({});\n\u003C\u002Fscript\u003E",active:d,free:b},{id:1003,name:"Forum thread",css_selector:c,position:7,one_time:b,show_every:4,code:"\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-4833888168110763\"\n crossorigin=\"anonymous\"\u003E\u003C\u002Fscript\u003E\n\u003C!-- forum.elvanco.com2 --\u003E\n\u003Cins class=\"adsbygoogle\"\n style=\"display:block\"\n data-ad-client=\"ca-pub-4833888168110763\"\n data-ad-slot=\"6072893959\"\n data-ad-format=\"auto\"\n data-full-width-responsive=\"true\"\u003E\u003C\u002Fins\u003E\n\u003Cscript\u003E\n (adsbygoogle = window.adsbygoogle || []).push({});\n\u003C\u002Fscript\u003E",active:d,free:b},{id:1004,name:"Forum post",css_selector:c,position:8,one_time:d,show_every:f,code:"\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-4833888168110763\"\n crossorigin=\"anonymous\"\u003E\u003C\u002Fscript\u003E\n\u003C!-- forum.elvanco.com3 --\u003E\n\u003Cins class=\"adsbygoogle\"\n style=\"display:block\"\n data-ad-client=\"ca-pub-4833888168110763\"\n data-ad-slot=\"3736443020\"\n data-ad-format=\"auto\"\n data-full-width-responsive=\"true\"\u003E\u003C\u002Fins\u003E\n\u003Cscript\u003E\n (adsbygoogle = window.adsbygoogle || []).push({});\n\u003C\u002Fscript\u003E",active:d,free:b}],profileStats:{fetched:b,personalMessages:a},stats:{fetched:b,threads:a,posts:a},breadcrumbs:[{text:R,disabled:b,href:S},{text:t,disabled:b,href:"\u002Fforum\u002Ftechnology-and-gadgets"},{text:h,disabled:d}],categories:[ai,aj,am,ap,as,aw,az,aC,aE,aG],categoriesWithChildren:[ai,aj,am,ap,as,aw,az,aC,aE,aG],roles:[{code:af,logo:c,name:i},{code:"ROLE_MODERATOR",logo:c,name:aH},{code:"ROLE_ADMIN",logo:c,name:"Administrator"}],i18n:{routeParams:{}},auth:{user:e,loggedIn:b,strategy:"local"}},serverRendered:d,routePath:"\u002Fthread\u002Fhow-to-create-a-css-grid-layout",config:{_app:{basePath:S,assetsPath:S,cdnURL:"https:\u002F\u002Fpub-1e27250373774d6ca37239bbf5810b5c.r2.dev\u002Fassets\u002F0.3\u002F"}},__i18n:{langs:{en:{common:{common_badge_blog:"blog",common_badge_post:"forum",common_badge_page:"page",answers:"no answers | 1 answer | {count} answers",likes:"no likes | 1 like | {count} likes",dislikes:"no dislikes | 1 dislike | {count} dislikes",show_more:aI,show_less:"Show Less",go_back:"Go Back",go_home_page:"Go Home Page",max_tag_reached:"Max Count of Tags Reached",in_category:"in category: ",our_privacy:"See our Privacy Policy",count_best_answers:aJ,search_ask_question:"Do you want to create a thread?",check_internet_connection:"You are offline! Check your internet connection.",by:"by",cookie_text:"This site uses cookies to ensure you get the best experience. By clicking \"Got it\" or continuing to browse the website, you are agreeing to our use of cookies.",got_it:"Got it",signature:aK,author_marked_as_best:aL,no_transition:"No Transition",mail_services:"Mail Services",free_files:"The current plan has a limit 10 files",user_not_active:"Deleted user",confirm_email_text:"We just sent an email to you with the confirmation code. Please put the confirmation code in field below.",main_top_ad:"Ad in all pages on the top",main_bottom_ad:"Ad in all pages on the bottom",blog_in_category_ad:"Ad in blog category",blog_post_top_ad:"Ad in blog post on the top",blog_post_bottom_ad:"Ad in blog post on the bottom",blog_in_post_ad:"Ad in blog post",forum_in_thread_ad:"Ad in forum thread",forum_in_post_ad:"Ad in forum post",sliding_ad:"Sliding Ad on all pages",page_ad:"Ad on the page",sidebar_under_menu:"Left sidebar under menu",site_is_not_ready:"You site is not ready yet",thanks_choosing_us:"Thank you for giving us the opportunity to serve you",register_site_first:"You need register your site first at",create_forum:"create a forum",create_forum_free:"free forum",create_forum_free_text:aM,create_qa_free_text:aM,create_qa_free:"Questions & Answers platform",support_text:"support forum",post_subject:aN,how_to_create_text:"If you have any question about our platform - you can easily ask us. We are always ready to help you by contact form or by our",subcategory:"Subcategories",category:aO,main_page:"Main Page",banned:"Banned User",no_banned:"Not Banned User",new_message:"New",not_read:"Not Read",spam:"Spam",trusted:aP,no_trusted:"Common User",security_questions:"Registration Questions",nice_to_see_you:"Nice to see you again",records_not_found:"No records found",not_found:"There were no results for your search.",member_from:"Member from",last_seen:"Last seen",not_authorized:"Sign in to your account",account:"Account",last_message:" Last Reply ",from:" from ",thanks_confirming:"Thank you for using our service. Account successfully confirmed!",thanks_confirming_details:"You can use your credentials to login into system",mail_settings_valid:"Congratulations! Mail Settings verified successfully and ready to use",terms:"Terms & Conditions",privacy:aQ,accept_terms:"I Agree to the Terms and Conditions",need_accept_terms:"You must agree to the Terms and Conditions in order to register",copyright_text:"This Site is Created By",security_messages:"Secure messages",na:"N\u002FA",active:aR,no_active:"Inactive",attention:"Attention!",count_topics:aS,need_moderation:"Approve message",no_data:"No data",no_files:"No files",no_records:"No records",no_messages:"No messages",count_messages:u,menu:k,search:v,action:"Action",pin_topic:"Pin topic",unpin_topic:"Unpin topic",existing_client:"Existing user? Sign In",close_topic:"Close topic",open_topic:"Open topic",rows_per_page:"Rows per page",top_menu:"Top menu",bottom_menu:"Bottom menu",waiting_approval:"Waiting approval",second:"Second",minute:"Minute",hour:"Hour",message:u,messages:u,topic_closed:"Topic closed",important_topic:"Important topic",threads:aT},animation:{default_fade:"Default Fade",fade_up:"Fade Up",fade_right:"Fade Right",fade_down:"Fade Down",fade_left:"Fade Left",rotate:"Rotate",rotate_down_left:"Rotate Down Left",rotate_down_right:"Rotate Down Right",rotate_up_left:"Rotate Up Left",rotate_up_right:"Rotate Up Right",slide_down:"Slide Down",slide_left:"Slide Left",slide_right:"Slide Right",slide_up:"Slide Up",flip:"Flip",flip_x:"Flip X",flip_y:"Flip Y",zoom:"Zoom",zoom_down:"Zoom Down",zoom_left:"Zoom Left",zoom_right:"Zoom Right",zoom_up:"Zoom Up",light_speed:"Light Speed",bounce:"Bounce",bounce_down:"Bounce Down",bounce_left:"Bounce Left",bounce_right:"Bounce Right",bounce_up:"Bounce Up"},tabs:{delete_forum:l,translation_settings:aU,inbox_pm:"Inbox",sent_pm:"Sent",moderator_main:"Statistic",moderator_threads:aV,role_settings:w,hash_tags_settings:m,moderator_users:x,export_settings:n,moderator_posts:y,blog_settings:z,privacy_settings:A,badge_settings:B,ad_settings:C,file_settings:o,my_profile_stat:"My Statistics",main_settings:"General Settings",mail_settings:D,layout_settings:E,forum_settings:"Categories",member_settings:aW,social_providers:F,page_settings:G,menu_settings:"Menu Settings",social_settings:H,security_settings:I,profile:aX,messages:u,redirect_settings:T,topics:aS},modals:{delete_forum:"I understand that the forum and all data will be permanently removed.",delete_tag:"Are you sure you want to delete this hash tag?",delete_tag_confirm:"Please confirm that you want to delete this hash tag",delete_badge:"Are you sure you want to delete this badge?",delete_badge_confirm:"Please confirm that you want to delete this badge",new_pm:"Compose Message",delete_role:"Are you sure you want to delete this role?",delete_role_confirm:"Please confirm that you want to delete this role",delete_user:"Are you sure you want to delete this user?",delete_file:"Are you sure you want to delete this file?",delete_file_confirm:"Please confirm that you want to delete this file",delete_user_confirm:"Please confirm that you want to delete this user",delete_thread:"Are you sure you want to delete this thread?",delete_thread_confirm:"Please confirm that you want to delete this thread",delete_ad:"Are you sure you want to delete this Ad?",delete_ad_confirm:"Please confirm that you want to delete this Ad",delete_blog_content:"Are you sure you want to delete this post?",delete_blog_content_confirm:"Please confirm that you want to delete this post",delete_blog_category:aY,delete_blog_category_confirm:"Please confirm that you want to delete this category and related subcategories, posts.",delete_redirect:"Are you sure you want to delete this redirect?",delete_redirect_confirm:"Please confirm that you want to delete this redirect link.",delete_category:aY,delete_category_confirm:"Please confirm that you want to delete this category and related subcategories, threads, posts.",delete_menu:"Are you sure you want to delete this menu link?",delete_menu_confirm:"Please confirm that you want to delete this menu link.",delete_page:"Are you sure you want to delete this page?",delete_page_confirm:"Please confirm that you want to delete this page.",delete_message:"Are you sure you want to delete this message?",delete_message_confirm:"Please confirm that you want to delete this message.",delete_topic:"Are you sure you want to delete this topic?",delete_topic_confirm:"Please confirm that you want to delete this topic and related posts.",delete_all_topic_message:"Are you sure you want to delete all messages?",delete_all_topic_message_confirm:"Please confirm that you want to delete all messages",delete_all_topic_text:"Are you sure you want to delete all topics?",delete_all_topic_text_confirm:"Please confirm that you want to delete all topics"},errors:{page_not_found:"Page not found",other_error:"Error happened"},toasts:{voted:"Your vote is counted",email_sent:"Confirmation Code Sent to Email",logout:"You successfully logged out",category_created:"Category successfully created!",category_updated:"Category successfully updated!",ad_created:"Ad successfully created!",ad_updated:"Ad successfully updated!",menu_created:"Menu link successfully created!",menu_updated:"Menu link successfully updated!",page_created:"Page successfully created!",page_updated:"Page successfully updated!",register_successfully:"You have successfully registered",confirm_email:"Please confirm your email address",posts_waiting_approval:"Posts waiting approval:",users_waiting_approval:"Users waiting approval:",threads_waiting_approval:"Threads waiting approval:",favicon_updated:"Favicon successfully updated",background_updated:"Background successfully updated",select_logo:"Please select logo",select_favicon:"Please select favicon",logo_updated:"Logo successfully updated",logo_deleted:"Logo successfully deleted",profile_updated:"Profile successfully updated",avatar_updated:"Avatar successfully updated",select_avatar:"Please select image file",select_background:"Please select background image file",auth_success:"Logged in successfully",settings_success:"Settings successfully updated",terms_success:"Terms successfully updated",message_send:"Message has been sent",created:U,updated:"Updated",password_changed:"Password changed successfully",record_created:U,deleted:"Deleted",success:"Success",error:"Error happened."},titles:{upgrade_pro:V,admin_delete:l,translation_settings:aZ,hash_tag_settings:m,badge_settings:B,roles:w,search:v,social_providers:F,confirm_account:a_,how_to_create:"How To Create Your Own Free Forum",category_settings:a$,edit_member:W,export_settings:n,file_settings:o,blog_settings:z,ad_settings:C,blog_content:J,blog_category:p,blog:K,my_pm:q,view_pm:X,members:ba,redirects:T,menu:k,pages:G,layout_settings:E,social_settings:H,security_settings:I,terms_settings:A,mail_settings:D,admin_index:L,moderator_index:M,moderator_threads:bb,moderator_users:x,moderator_posts:y,change_password:r,view_profile:"user profile",my_profile:Y,register:bc,login:g,restore_password:s,contact_us:N},descriptions:{upgrade_pro:V,admin_delete:l,translation_settings:aZ,hash_tag_settings:m,badge_settings:B,roles:w,social_providers:F,confirm_account:a_,how_to_create:"How To Create Your Own Free Forum. If you need a free modern forum - you can create it right now.",category_settings:a$,export_settings:n,edit_member:W,moderator_index:M,file_settings:o,moderator_threads:bb,moderator_users:x,moderator_posts:y,ad_settings:C,blog_settings:z,my_pm:q,view_pm:X,blog:K,blog_category:p,blog_content:J,members:ba,redirects:T,menu:k,terms_settings:A,layout_settings:E,pages:G,social_settings:H,security_settings:I,admin_index:L,mail_settings:D,change_password:r,view_profile:"user profile. Contacts, messages, topics.",my_profile:Y,register:bc,login:g,restore_password:s,contact_us:"You can always send us message and we always ready to help. "},mail:{other:"Other",gmail:"Gmail",yandex:"Yandex",yahoo:"Yahoo",mail:"Mail.ru",rambler:"Rambler",bing:"Bing",outlook:"Outlook",aol:"AOL"},activations:{email:"Email confirmation required",manually:"Manually by admin\u002Fmoderator",automatically:"Automatically, after registration"},toc:{disabled:"No Active",top:"Top",bottom:"Bottom"},export:{yes:"Yes",no:"No",blog_category:p,blog:"Blog Posts",forum:"Forum",profile:"Profiles"},watermark:{center:"Center",top_left:"Top-Left Corner",top_right:"Top-Right Corner",bottom_left:"Bottom-Left Corner",bottom_right:"Bottom-Right Corner"},conditions:{threads:aT,posts:"Posts",best_answers:aJ},forms:{default_role:"Default role for new users",hash_tag:"Hash Tag",hash_tags:"Tags (not required)",meta_title:"Meta Title",meta_description:"Meta Description",value:"Value",condition:"Condition",allow_hash_tags:"Enable Hash Tags",access_pm:q,create_post:"Create Post",edit_own_post:"Edit Own Post",edit_any_post:"Edit Any Post",moderate_data:"Moderate Posts\u002FThreads etc...",access_to_admin_tool:"Access to Admin Tool",register_limit:"Registration limit",permissions:"Permissions",created:U,scrollable_pagination:"Scrollable pagination",is_public_category:"Access to everyone",roles:"Only roles have access",add_source:"Add Source Whenever Copy Text?",allow_likes:"Allow to user likes posts and threads?",add_watermark:"Add Watermark to Images?",add_watermark_position:"Watermark Position",messages_before_auto_approved:"How many posts approve manually for the new users?",add_source_text:"Text:",move_to_category:"Move Threads and Messages to Category",blog_move_to_category:"Move Content to Category",default_add_source_text:ag,category:"Category:",code_theme:"Code Editor Theme:",user_link_type:"Type:",user_link:"Link:",is_profile_public:"Make Profile Public:",add_social_link:"Add Social Link",confirm_your_email:"Confirm your email",background_full:"Full Screen Image",notifications:"Notifications",to_username:"To",page_transition:"Page Transition",subject:"Subject",signature:aK,no_ad:"No Ad in this post",max_length:"Max XX characters",custom_css:"Custom CSS",security_question_question:bd,is_related_post:"Enable Related Posts",related_post:"Count of Related Posts",is_related_thread:"Enable Related Threads",related_thread:"Count of Related Threads",from_name:"From:",to_name:"To:",role:be,created_date:"Created at",status:"Status",export_data:"export data",export_data_deleted:"Unfortunately export deleted because we store it just in 3 days. If you need fresh data please create a new request.",export_data_deleted_short:"Unfortunately export deleted",export_settings:"Export Settings",security_question_answer:"Answer","messages_before_au to_approved":"How many approved messages for new clients",mark_uncertain_messages:"Moderate manually uncertain messages",thread_limit:"Thread limit",directory_name:"Directory name",nofollow:"Add for links rel=nofollow",blog_social_sizes:"Icon Size",notify_on_moderation:"Notify me about messages\u002Fthreads on moderation",directory:"Directory",summary:"Summary",badge_name:"Badge Name",badge_description:bf,badge_icon:"Icon",banned:"Banned",robots_txt:"Robots.txt",toc:aN,one_time:"Show one time",show_every:"Show every",show_after:"Show after",css_selector:"CSS selector",code:"Code",file:"File",question:bd,answer:"You answer",thread_limit_type:"Thread limit by",register_limit_type:"Register limit",trusted:aP,edit_profile:bg,post_limit:"Post limit",post_limit_type:"Post limit by",category_name:"Category name",category_description:"Category Description",blog_category:aO,text_font_family:"Font Family",add_in_menu:"Add In Menu",avatar:"Avatar",template:"Template",old_url:"Old URL",new_url:"New URL",image:bh,is_dark:"Dark Mode",logo:"Logo",topic_name:bi,open_new_tab:"Open in new tab",no_index:"Noindex page by google, bing, yahoo etc...",text_link:"Link text",select_page:"Select page",select_manually:"Manually",parent_category:"Parent Category",link:"Link",name:Z,encryption:"Encryption",host:"Host",port:"Port",user:bj,page:"Page",position:"Position",type_background:"Background",no_background:"None",background_color:"Color",background_image:bh,activation:"Activate new members",password:"Password",new_password:"New password",confirm_password:"Confirm password",username:bj,firstname:"First name",favicon:"Favicon",favicon_png:"Favicon PNG",forum_name:Z,active:aR,page_name:Z,forum_description:bf,footer_code:"Footer custom code (ex. google analytics code)",lastname:"Last name",update:bk,email:"Email",company:"Company",message:"Message",text:"Text"},social_size:{small:"Small",medium:"Medium",large:"Large"},buttons:{upgrade_pro:V,delete_forum:l,buy_now:"Get Started",make_default_role:"Set role as the default for new users",edit_hash_tag:"Edit Hash Tag",new_hash_tag:"Add Hash Tag",new_badge:"Add Badge",edit_badge:"Edit Badge",add_role:bl,edit_role_link:"Edit Role",add_role_link:bl,login_google:g,login_facebook:g,login_github:g,cancel:"Cancel",delete_and_keep_messages:"Delete (keep messages\u002Fthreads)",login_google_tooltip:"Login with Google",login_facebook_tooltip:"Login with Facebook",login_github_tooltip:"Login with Github",moderate:aH,best_answer:aL,answer:bm,my_profile:aX,ask_question:"Ask Question",add_redirect:"New Redirect",edit_redirect:"Edit Redirect",search_more:"Search More",resend_code:"Resend Code",confirm_email:"Confirm Email",show_more:aI,add_ad:bn,edit_ad:"Edit Ad",new_ad:bn,new_file:"New File",deactivate:"Deactivate",activate:"Activate",unbanned:"Unbanned",bann:bo,new_pm:"Compose",spam:"Mark As Spam",blog_social_share:"Social Share Buttons",new_export:bp,export_data:bp,new_directory:"New Directory",upload_file:"Upload File",upload_directory:"Create folder",edit_category:bq,edit_thread:"Edit Thread",add_category:br,add_menu_link:bs,blog_category:p,blog_content:J,edit_menu_link:"Edit link",new_menu:bs,validate_mail_settings:"Validate",new_page:"New Page",read:"Read More",new_blog_category:br,edit_blog_category:bq,new_blog_content:"New Post",edit_blog_content:"Edit Post",edit_page:"Edit Page",upload_avatar:"Upload avatar",upload_logo:"Upload Logo",delete_logo:"Remove Logo",upload_favicon:"Upload Favicon",upload_favicon_png:"Upload Favicon PNG",topic_name:bi,contact_us:N,home:R,upload_background:"Upload background image",ban:bo,unban:"Unban",delete_all_topic:"Delete all topics",delete_all_messages:"Delete all messages",admin:"Admin Dashboard",profile:bt,signin:"Sign In",register:_,change_password:r,role:be,logout:"Logout",reply:"Reply to this topic",reply_pm:bm,edit_post:"Edit post",new_post:"Add message",save:"Save",edit:"Edit",new_message:"New message",restore_password:s,remove:"Remove",login:g,close:"Close",add:"Add",update:bk,delete:"Delete",reset:"Reset Color Schema",send:"Send",clear:"Clear"},headers:{admin_hash_tags:m,admin_badges:B,roles:w,search:v,related_post:"Related Posts",related_thread:"Related Threads",edit_profile:bg,admin_members:"Users",export_settings:n,select_export:"Please select export settings",posts_on_moderation:"Posts on moderation",threads_on_moderation:"Threads on moderation",users_on_moderation:"Users on moderation",moderator_home:M,my_pm:q,moderator_index:"Statistics",admin_home:L,blog:K,change_password:r,admin_redirects:"List of Redirect",admin_ad:"List of Ads",file_settings:o,view_profile:"User profile",color_settings:"Theme Color Settings",primary_color:"Primary Color",secondary_color:"Secondary Color",accent_color:"Accent Color",info_color:"Info Color",success_color:"Success Color",error_color:"Error Color",warning_color:"Warning Color",my_profile:Y,register:_,menu:k,follow_us:"Follow us",about_us:"About us",login:g,restore_password:s,contact_us:N},breadcrumbs:{pro:"PRO status",admin_delete:l,translation:aU,privacy:aQ,hash_tag_settings:m,badge_settings:"Badge",menu_home:k,social_providers:F,search:v,export_settings:n,confirm_account:"Account confirmation",blog_home:K,pm:q,view_pm:X,blog_content:J,blog_settings:z,ad_settings:C,file_settings:o,privacy_settings:A,forum_settings:"Category Settings",mail_settings:D,layout_settings:E,redirects:"Redirects",blog_categories:p,edit_member:W,members:aW,pages:G,social_settings:H,security_settings:I,admin_index:L,moderator_threads:aV,moderator_posts:y,moderator_users:x,moderator_index:M,change_password:r,home:R,view_profile:"User Profile",my_profile:bt,login:g,register:_,contact_us:N,restore_password:s},plan:{success:"Payment Successful!",success_detail:"Your payment was successfully processed. Thank you for your purchase!",failed:"Payment Failed",failed_detail:"We're sorry, but your payment could not be processed.",failed_detail_line_2:"Please check your payment details and try again.",free:"Free",free_price:"$0\u002Fmo",free_description:"Great for starters",pro:"Pro",pro_price:"$9.99\u002Fmo",pro_description:"Most popular",enterprise:bu,enterprise_price:bu,custom_price:"Custom",feature:{unlimited_posts:"Unlimited Posts",unlimited_threads:"Unlimited Threads",unlimited_category:"Unlimited Category",unlimited_users:"Unlimited Users",ssl:"Free SSL",use_own_domain:"Use your own domain",spam_protection:"Spam Protection",ad_free:"AD Free",no_copyright:"No Copyright in the Footer",dedicated_server:"Dedicated Server"}}}}}}}(0,false,"",true,null,1,"Login","How to create a CSS grid layout?","Member","#FF5252","Menu","Delete Forum","Hash Tags","Export","File Settings","Blog Category","Personal Messages","Change password","Restore password","Technology and Gadgets","Messages","Search","Roles","Moderate Users","Moderate Posts","Blog Settings","Privacy Settings","Badges","Ad Settings","Mail Settings","Layout Settings","Social Logins","Pages","Social Settings","Security Settings","Blog Content","Blog","Admin dashboard","Moderator dashboard","Contact us",69014,"Users can discuss the latest gadgets, software, hardware, and emerging technologies in this category.","Questions & Answers","Home","\u002F","Redirect","Created","Upgrade to PRO","Edit User Details","View Message","My Profile","Name","Sign Up","qa","technology-and-gadgets","how-to-create-a-css-grid-layout","How to create a responsive layout with CSS?","How to use CSS3 grid for layout?","How to use Flexbox for layout in CSS?","ROLE_CLIENT","Read more at:","A Questions & Answers (Q&A) platform is an online platform that allows users to ask questions and receive answers from a community of users or experts.",{},{},"Entertainment and Media","This category is dedicated to discussions about movies, TV shows, music, books, gaming, and other forms of entertainment.",{},"Sports and Fitness","Users can engage in discussions about sports, fitness tips, workout routines, and share their favorite teams and athletes.",{},"Health and Wellness","Discussions about health-related topics, mental well-being, nutrition, healthy lifestyles, and self-care can take place in this category.",{},"Gaming","Discussions about video games, online gaming, gaming news, game reviews, and general entertainment topics.","price.wintheiser",{},"Business and Finance","Discussions related to entrepreneurship, business strategies, financial planning, investments, and career development.",{},"Pets and Animals","A category for pet owners and animal lovers to discuss pet care, training, behavior, share cute animal pictures, and seek advice.",{},"Engage in Home & Garden Discussions: Tips, Ideas, and Inspiration",{},"Unlock Your Future: Job & Career Discussions",{},"Moderator","Show More","Best Answers","Signature","Best Answer","Get Your Own","Table of Contents","Category","Trusted User","Privacy Policy","Active","Topics","Threads","Translation","Moderate Threads","Members","Profile","Are you sure you want to delete this category?","Translation Settings","Your account was successfully confirmed","Forum Category Settings","List Users","Moderate Thread","Register for the forum","Question","Role","Description","Edit Profile","Image","Title","Username","Update","Add Role","Reply","New Ad","Ban","Export Data","Edit Category","New Category","Add a new menu link","My profile","Enterprise"));</script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/7b8ec9d.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/25edc65.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/863688a.js" defer></script><script src="https://pub-1e27250373774d6ca37239bbf5810b5c.r2.dev/assets/0.3/cb42003.js" defer></script> </body></html> 
