{"id":6202,"date":"2022-11-14T04:30:22","date_gmt":"2022-11-14T04:30:22","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=6202"},"modified":"2022-11-14T05:47:32","modified_gmt":"2022-11-14T05:47:32","slug":"grid-css-for-web-page-layout","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/","title":{"rendered":"Grid CSS for Web Page Layout"},"content":{"rendered":"

What is CSS Grid?<\/h2>\n

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
\nLike tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are possible or easier with CSS<\/a> grid than with tables. For example, a grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.<\/p>\n

How to Create a Perfect CSS Grid on Your Website <\/strong>
\nThe example below shows a track grid with new rows created for the header and footer. Items have been placed onto the grid using line-based placement.<\/p>\n

HTML:<\/h3>\n

<!DOCTYPE html>
\n<html lang=\"en\">
\n<head>
\n<meta charset=\"utf-8\">
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">
\n<title>CSS Grid Example<\/title>
\n<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\">
\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">
\n<\/head>
\n<body>
\n<div class=\"form-screen\">
\n<div id=\"grid\">
\n<div class=\"col align-self-start\">
\n<div class=\"container\">
\n<header>add logo here<\/code><\/p>\n

<\/div>
\n<\/div>
\n<div class=”col align-content-stretch”>
\n<div class=”container”>
\n<section>
\n<div class=”form”>
\n<div class=”form-group”>
\n<label>First Name
\n<input type=”text” class=”form-control”>
\n<\/div>
\n<div class=”form-group”>
\n<label>Last Name
\n<input type=”text” class=”form-control”>
\n<\/div>
\n<div class=”form-group”>
\n<label>Email
\n<input type=”text” class=”form-control”>
\n<\/div>
\n<div class=”form-group”>
\n<input type=”submit” class=”btn primary-btn”>
\n<\/div>
\n<\/div>
\n<\/section>
\n<\/div>
\n<\/div>
\n<div class=”col align-self-end”>
\n<div class=”container”>
\n<footer>add footer link here<\/footer>
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/div>
\n<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js”><\/script>
\n<script src=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js”><\/script>
\n<script src=”https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js”><\/script>
\n<\/body>
\n<\/html><\/p>\n

<\/code><\/p>\n

CSS<\/h3>\n

html, body, #grid, .form-screen
\n{
\nheight:100%;
\n}
\n\/* Some custom styles to beautify this example *\/
\n.row{
\nmargin-top:0rem;
\nheight: 100%;
\n}
\n#grid {
\ndisplay: grid;
\ngrid-template-areas: \"1\";
\ngrid-gap: 0px;
\ngrid-auto-columns:100%;
\n}
\n#grid > div {
\ntext-align: center;
\n}
\nheader, footer
\n{
\nbackground: green;
\n}
\nsection {
\nwidth: 250px;
\nmargin: 0 auto;
\nbackground: #a8a2a2;
\nborder-radius: 4px;
\npadding: 20px;
\ntext-align: left;
\nmargin-top: 30px;
\nmargin-bottom: 30px;
\n}<\/code>
\n\"grid\"<\/p>\n

Benefits of a CSS Grid<\/h3>\n

Thanks to its flexibility, it allows web designers to achieve almost any type of layout that they need. It’s great for dividing up the significant regions of a page into smaller sections or setting the relationship between elements in terms of size and position.
\nWhile it aligns page elements by columns and rows like tables, the grid isn’t limited by a particular content structure. This makes it possible to create a wider variety of website layouts than would be practical with tables alone.<\/p>\n

If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams<\/a> are offered by StudySection along with other programming certification exams.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

What is CSS Grid? CSS Grid Layout excels at dividing a page into major regions or defining the relationship in<\/p>\n","protected":false},"author":1,"featured_media":6203,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[815,816],"acf":[],"yoast_head":"\nGrid CSS for Web Page Layout - StudySection Blog<\/title>\n<meta name=\"description\" content=\"With Grid CSS Layout, you may define the relationship between a page's key areas or its relationship in terms of size, location, and layer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grid CSS for Web Page Layout - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"With Grid CSS Layout, you may define the relationship between a page's key areas or its relationship in terms of size, location, and layer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-14T04:30:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-14T05:47:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/11\/Grid-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Grid CSS for Web Page Layout\",\"datePublished\":\"2022-11-14T04:30:22+00:00\",\"dateModified\":\"2022-11-14T05:47:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/\"},\"wordCount\":467,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Grid\",\"Web Page\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/\",\"url\":\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/\",\"name\":\"Grid CSS for Web Page Layout - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2022-11-14T04:30:22+00:00\",\"dateModified\":\"2022-11-14T05:47:32+00:00\",\"description\":\"With Grid CSS Layout, you may define the relationship between a page's key areas or its relationship in terms of size, location, and layer.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Grid CSS for Web Page Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Grid CSS for Web Page Layout - StudySection Blog","description":"With Grid CSS Layout, you may define the relationship between a page's key areas or its relationship in terms of size, location, and layer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/","og_locale":"en_US","og_type":"article","og_title":"Grid CSS for Web Page Layout - StudySection Blog","og_description":"With Grid CSS Layout, you may define the relationship between a page's key areas or its relationship in terms of size, location, and layer.","og_url":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2022-11-14T04:30:22+00:00","article_modified_time":"2022-11-14T05:47:32+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/11\/Grid-CSS.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Grid CSS for Web Page Layout","datePublished":"2022-11-14T04:30:22+00:00","dateModified":"2022-11-14T05:47:32+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/"},"wordCount":467,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Grid","Web Page"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/","url":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/","name":"Grid CSS for Web Page Layout - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2022-11-14T04:30:22+00:00","dateModified":"2022-11-14T05:47:32+00:00","description":"With Grid CSS Layout, you may define the relationship between a page's key areas or its relationship in terms of size, location, and layer.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/grid-css-for-web-page-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Grid CSS for Web Page Layout"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":144,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6202"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=6202"}],"version-history":[{"count":5,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6202\/revisions"}],"predecessor-version":[{"id":6209,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6202\/revisions\/6209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/6203"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=6202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=6202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=6202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}