{"id":5140,"date":"2026-03-30T13:47:53","date_gmt":"2026-03-30T08:17:53","guid":{"rendered":"https:\/\/codematrix.co.in\/blog\/?page_id=5140"},"modified":"2026-03-31T10:12:01","modified_gmt":"2026-03-31T04:42:01","slug":"css-grid-layout","status":"publish","type":"page","link":"https:\/\/codematrix.co.in\/blog\/css-grid-layout\/","title":{"rendered":"CSS Grid Layout"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5140\" class=\"elementor elementor-5140\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59364db e-flex e-con-boxed e-con e-parent\" data-id=\"59364db\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae99517 elementor-widget elementor-widget-html\" data-id=\"ae99517\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- Brand Styling --- *\/\r\n    :root {\r\n        --brand-purple: #9C00E4;\r\n        --brand-light: #f3e8ff;\r\n    }\r\n\r\n    \/* Reset & Base *\/\r\n    .python-full-layout * { box-sizing: border-box; }\r\n\r\n    \/* Layout Adjustments *\/\r\n    .python-full-layout { \r\n        display: flex; \r\n        gap: 30px; \r\n        padding: 20px; \r\n        max-width: 1200px; \r\n        margin: 0 auto;\r\n        background: #fdfbff; \r\n    }\r\n\r\n    .sidebar { \r\n        width: 280px; \r\n        position: sticky; \r\n        top: 20px; \r\n        height: fit-content; \r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .sidebar .topic { \r\n        display: block; \r\n        padding: 12px; \r\n        text-decoration: none; \r\n        color: #444; \r\n        border-radius: 8px; \r\n        margin-bottom: 8px; \r\n        background: #fff;\r\n        border: 1px solid #eee;\r\n        transition: 0.3s;\r\n    }\r\n\r\n    .sidebar .topic.active { \r\n        background: var(--brand-purple); \r\n        color: white; \r\n        border-color: var(--brand-purple);\r\n    }\r\n\r\n    \/* Main Content *\/\r\n    .main-content { \r\n        flex: 1; \r\n        font-family: 'Segoe UI', sans-serif; \r\n        min-width: 0; \r\n    }\r\n\r\n    .article-card { \r\n        background: white; \r\n        padding: 30px; \r\n        border-radius: 15px; \r\n        box-shadow: 0 4px 15px rgba(0,0,0,0.05); \r\n    }\r\n\r\n    h1 { color: var(--brand-purple); font-size: 2.2rem; margin-bottom: 20px; }\r\n    h2 { color: #333; margin-top: 30px; border-left: 4px solid var(--brand-purple); padding-left: 15px; }\r\n    \r\n    .custom-img { \r\n        display: block; \r\n        margin: 30px auto; \r\n        width: 100%; \r\n        max-width: 600px; \r\n        border: 2px solid #e9d5ff; \r\n        border-radius: 10px;\r\n    }\r\n\r\n    pre { \r\n        background: #1e1e1e; \r\n        color: #dcdcdc; \r\n        padding: 15px; \r\n        border-radius: 8px; \r\n        overflow-x: auto;\r\n        font-family: 'Consolas', monospace;\r\n        font-size: 0.9rem;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .code-keyword { color: #569cd6; }\r\n    .code-prop { color: #9cdcfe; }\r\n    .code-val { color: #ce9178; }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 991px) {\r\n        .python-full-layout { flex-direction: column; }\r\n        .sidebar { width: 100%; position: relative; top: 0; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"python-full-layout\">\r\n    <aside class=\"sidebar\">\r\n        <h2 style=\"font-size: 1.2rem; color: var(--brand-purple); margin-bottom: 15px;\">Modern CSS<\/h2>\r\n        <a href=\"#definition\" class=\"topic active\">What is Grid?<\/a>\r\n        <a href=\"#terminology\" class=\"topic\">1. Grid Terminology<\/a>\r\n        <a href=\"#properties\" class=\"topic\">2. Parent Properties<\/a>\r\n        <a href=\"#fraction\" class=\"topic\">3. The fr Unit<\/a>\r\n        <a href=\"#mcq\" class=\"topic\">Practice MCQs<\/a>\r\n    <\/aside>\r\n\r\n    <main class=\"main-content\">\r\n        <article class=\"article-card\">\r\n            \r\n            <header id=\"definition\">\r\n                <h1>CSS Grid Layout<\/h1>\r\n                <p><strong>CSS Grid Layout<\/strong> is the most powerful layout system available in CSS. It is a <strong>2-dimensional system<\/strong>, meaning it can handle both columns and rows at the same time, unlike Flexbox which is largely 1-dimensional.<\/p>\r\n            <\/header>\r\n\r\n            <img decoding=\"async\" src=\"https:\/\/codematrix.co.in\/blog\/wp-content\/uploads\/2026\/03\/1_m2Q3kRG9yl5WyNIyoe15XA.png\" alt=\"CSS Grid Layout\" class=\"custom-img\">\r\n            \r\n\r\n            <section id=\"terminology\">\r\n                <h2>1. Important Terminology<\/h2>\r\n                <p>Before diving into code, you must understand the \"parts\" of a grid:<\/p>\r\n                <ul>\r\n                    <li><strong>Grid Container:<\/strong> The element on which `display: grid` is applied.<\/li>\r\n                    <li><strong>Grid Item:<\/strong> The direct children of the container.<\/li>\r\n                    <li><strong>Grid Line:<\/strong> The dividing lines that make up the structure (vertical and horizontal).<\/li>\r\n                    <li><strong>Grid Cell:<\/strong> The smallest unit of the grid (like a single cell in Excel).<\/li>\r\n                <\/ul>\r\n            <\/section>\r\n\r\n            <section id=\"properties\">\r\n                <h2>2. Defining the Grid<\/h2>\r\n                <p>To start, you define how many columns and rows you want using the container properties:<\/p>\r\n                <pre>\r\n.<span class=\"code-keyword\">container<\/span> {\r\n    <span class=\"code-prop\">display<\/span>: <span class=\"code-val\">grid<\/span>;\r\n    <span class=\"code-prop\">grid-template-columns<\/span>: <span class=\"code-val\">200px 200px 200px<\/span>;\r\n    <span class=\"code-prop\">grid-template-rows<\/span>: <span class=\"code-val\">auto<\/span>;\r\n    <span class=\"code-prop\">gap<\/span>: <span class=\"code-val\">20px<\/span>;\r\n}<\/pre>\r\n            <\/section>\r\n\r\n            \r\n\r\n            <section id=\"fraction\">\r\n                <h2>3. The 'fr' Unit<\/h2>\r\n                <p>CSS Grid introduced the <strong>fr unit<\/strong> (fractional unit). It represents a fraction of the free space in the grid container. Using `1fr 2fr 1fr` would split the space into 4 parts, giving the middle column twice as much space as the others.<\/p>\r\n            <\/section>\r\n\r\n            <section id=\"mcq\" class=\"practice-mcqs\">\r\n                <h2>Knowledge Check<\/h2>\r\n                <div class=\"mcq-box\" style=\"background: #f9f4ff; padding: 20px; border-radius: 10px; border: 1px solid #e9d5ff;\">\r\n                    <p><strong>1. CSS Grid is primarily known as a ______ system.<\/strong><br>\r\n                    A) 1-Dimensional | B) <strong>2-Dimensional<\/strong> | C) 3-Dimensional<\/p>\r\n                    \r\n                    <p><strong>2. Which property is used to create space between grid items?<\/strong><br>\r\n                    A) spacing | B) padding | C) <strong>gap<\/strong><\/p>\r\n\r\n                    <p><strong>3. What does 1fr represent?<\/strong><br>\r\n                    A) 1 fixed pixel | B) <strong>1 fraction of available space<\/strong> | C) 1% of the width<\/p>\r\n                <\/div>\r\n            <\/section>\r\n\r\n            <div style=\"text-align: center; margin-top: 40px;\">\r\n                <a href=\"https:\/\/codematrix.co.in\/courses\" target=\"_blank\" style=\"background: var(--brand-purple); color: white; padding: 12px 25px; text-decoration: none; border-radius: 8px; display: inline-block; font-weight: bold;\">\r\n                    \ud83d\ude80 Master CSS Grid Today!\r\n                <\/a>\r\n            <\/div>\r\n\r\n        <\/article>\r\n    <\/main>\r\n<\/div>\r\n\r\n<script>\r\nwindow.addEventListener('DOMContentLoaded', () => {\r\n    const sections = document.querySelectorAll('header[id], section[id]');\r\n    const navLinks = document.querySelectorAll('.sidebar .topic');\r\n\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                navLinks.forEach(link => {\r\n                    link.classList.remove('active');\r\n                    if (link.getAttribute('href') === `#${entry.target.id}`) {\r\n                        link.classList.add('active');\r\n                    }\r\n                });\r\n            }\r\n        });\r\n    }, { threshold: 0.5 });\r\n    sections.forEach(section => observer.observe(section));\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Modern CSS What is Grid? 1. Grid Terminology 2. Parent Properties 3. The fr Unit Practice MCQs CSS Grid Layout CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows at the same time, unlike Flexbox which is largely 1-dimensional. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5140","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/5140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/comments?post=5140"}],"version-history":[{"count":7,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/5140\/revisions"}],"predecessor-version":[{"id":5917,"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/pages\/5140\/revisions\/5917"}],"wp:attachment":[{"href":"https:\/\/codematrix.co.in\/blog\/wp-json\/wp\/v2\/media?parent=5140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}