Holy Grail Layout with CSS Grid - GeeksforGeeks (2024)

Table of Contents

Approach: Please Login to comment... Similar Reads Thank You!

Courses
Tutorials
- Data Structures & Algorithms
- Python
- ML & Data Science
  - Machine Learning
  - Data Science Tutorial
  - Data Science Packages
    - Pandas Tutorial
    - NumPy Tutorial
  - Data Visualization
  - Data Analysis
  - Deep Learning
  - NLP Tutorial
  - OpenCV Tutorial
  - Interview Questions
- System Design
- Interview Corner
- Languages
  - C
  - C++
  - Java
  - Python
  - R Tutorial
  - C#
  - SQL
  - Scala
  - Perl
  - Go Language
- Web Development
  - HTML
  - CSS
  - JavaScript
  - TypeScript
  - ReactJS
  - Node.js
  - PHP
  - AngularJS
  - jQuery
  - Web Development Using Python
  - Web Design
  - 100 Days of Web Development
- CS Subjects
- DevOps And Linux
- School Learning
- GATE
- GeeksforGeeks Videos
Jobs
- Get Hired: Apply for Jobs
- Corporate Hiring Solutions
- Filtered Jobs
Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- Language Wise Coding Practice
- Curated DSA Lists
Contests

Open In App

Last Updated : 24 Jul, 2024

Summarize

Comments

Improve

Suggest changes

Like Article

Save

Report

The Holy Grail layout is a widely used web layout that consists of a header, footer, left sidebar, right sidebar, and main content area. This layout is expected to be responsive and adapt to different screen sizes. Despite the varying content lengths, the layout should maintain its structure and ensure the header and footer are always at the top and bottom, respectively.

In the Holy Grail layout, we will have 3 rows and 3 columns. The header and footer will span all three columns, while the left sidebar, main content, and right sidebar will occupy their respective columns. By specifying the row and column properties, we can achieve the desired layout.

In this article, we will implement this layout using CSS Grid, which offers a straightforward and flexible solution.

Syntax:

.parent {
 display: grid;
 grid-template: auto 1fr auto / auto 1fr auto;
}

Approach:

Create a CSS file that will contain our CSS styles.
Define the HTML structure using a parent container that wraps all the content: header, left sidebar, right sidebar, main content, and footer.
Inside the parent container, create separate div elements for each section: header, left sidebar, main content, right sidebar, and footer.
Add placeholder content to each section to visualize the layout structure.

Example: This example describes the implementation of the Holy Grail Layout by implementing the CSS Grid Property.

HTML

<!-- index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Holy Grail Layout</title></head><body> <div class="parent"> <header> This is header </header> <div class="left-sidebar"> I am left sidebar </div> <main> I am main content </main> <div class="right-sidebar"> I am right sidebar and I am having more text </div> <footer>I am footer</footer> </div></body></html>

style.css

CSS

/* style.css */html,body { padding: 0; margin: 0;}.parent { height: 100vh; display: grid; grid: auto 1fr auto / 100px 1fr 100px;}header,footer,.left-sidebar,main,.right-sidebar { padding: 10px;}header { grid-column: 1 / 4; background-color: red;}.left-sidebar { grid-column: 1 / 2; background-color: green;}main { grid-column: 2 / 3; background-color: plum;}.right-sidebar { grid-column: 3 / 4; background-color: greenyellow;}footer { grid-column: 1 / 4; background-color: blue; color: white;}@media (max-width: 768px) { .parent { grid: repeat(5, 1fr) / 1fr; } header, footer, .left-sidebar, main, .right-sidebar { grid-column: 1 / 2; }}

Output:

Please Login to comment...

Similar Reads

Bootstrap 4 | Holy Grail Layout

The Holy Grail Layout is a classic CSS problem in web development. Although there are a lot of creative solutions developed in HTML and CSS, the problem faced was that it involved sacrifices where enriching one feature is often compromised at the expense of the others. Modern frameworks such as Bootstrap 4 provides utilities for implementing this l

3 min read

Line-Based Placement of Grid Items with CSS Grid Layout

CSS Grid Layout is a flexible tool for designing web pages. One of its key features is line-based placement, which allows you to position items exactly where you want them using grid lines. This guide will explain different ways to use line-based placement in CSS. CSS Grid Layout divides a container into rows and columns, which are defined by grid

5 min read

Introduction to Web Development and the Holy Trinity of it

Introduction and Holy Trinity of Web Development This article will give you an overview of the Front End Development, Back-End Development, and the Full Stack Development and will give you an idea about each of them in detail so that you can decide your field of interest for yourself. Starting from the basic book definition, ‘Web development refers

12 min read

How to create a Trello Layout with CSS Grid and Flexbox ?

Trello layout is used to organize or manage information in stages. It can be created using CSS Grid and Flexbox. Let's create the layout as shown in the below image. In the image, Trello Layout consists of Trello List which holds the items or information in it. Layout Structure: Example: To understand the Trello layout, let us first create a single

2 min read

What is CSS Grid Layout ?

The CSS Grid Layout is a powerful two-dimensional layout system that allows you to design complex web layouts with rows and columns. It provides a more flexible and efficient way to create grid-based designs compared to traditional methods. Note: An HTML element becomes a grid if that element sets display: grid; in style section or inline-grid. Syn

1 min read

How to Create a Responsive CSS Grid Layout ?

A grid layout is said to be responsive when fixed-sized grid items will shift position according to the viewport size. Responsiveness gives more professional look to the website. It is necessary to out perform your website design. we are going to learn how can we create a responsive CSS grid layout. These are the following approaches: Table of Cont

4 min read

CSS Grid Layout: The Fr Unit

The CSS Grid Layout module is used to create a grid-based layout system. Utilizing rows and columns, it simplifies the design of webpages without relying on floats and positioning. Syntax: .class { display:grid;}Note: An HTML element becomes a grid if that element sets display:grid grid-template-columns: This specifies the size of the columnsgrid-t

4 min read

CSS Grid Layout Module

The CSS Grid Layout Module is a revolutionary tool in the realm of web development. It introduces a grid-based layout system, facilitated by rows and columns, that simplifies the design process of any webpage. This system eliminates the need for floats and positioning, making it a game-changer for developers. iframe { width: 100%; height: 330px;} @

7 min read

How to Create a 3-Column Layout Grid with CSS?

Grid in CSS is a powerful layout system that allows you to create complex, responsive designs with ease. By defining rows and columns, you can position elements precisely within a grid container. Using grid properties like grid-template-columns, you can create flexible and adaptive layouts, such as a 3-column design that adjusts to various screen s

3 min read

How to Create a 2-Column Layout Grid with CSS?

Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or other types of content distribution. These are the

4 min read

How to Create a 4-Column Layout Grid with CSS?

We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a common design structure used in web pages to neatly

4 min read

How to Create Dynamic Grid Layout using CSS?

A dynamic grid layout using CSS can help us to build responsive and flexible web designs. In this article, we are going to learn about different approaches to achieving dynamic grid layouts, with their syntax, and example code for each method. A dynamic grid layout adjusts based on the content and screen size. It is useful for building responsive d

3 min read

CSS Grid Layout auto-placement

Auto placement in CSS Grid layout refers to the automatic placement of grid items in the grid container when explicit placement is not found. The CSS Grid Layout provides a mechanism to control how items are placed on the grid when their positions are not specified. This helps in creating layouts without the need for manually defining every grid it

3 min read

How to make a grid without calling CSS Grid property ?

In this article, we will see how to make a grid without calling CSS Grid property, along with understanding its implementation through the examples. It is essential to understand how CSS grid property works but what if we do not use the CSS grid property to make a grid. This is the generic question asked by the interviewer, which can give you a bet

4 min read

Pure CSS Regular Grid vs Responsive Grid

Pure CSS is a free and open-source CSS framework. It is a collection of tools for creating online programs and responsive web pages. This was developed by Yahoo and is used to make websites that load faster, look better, and are easier to use. Bootstrap is effectively replaced by it. When developing Pure CSS, the responsive design was taken into ac

4 min read

Bootstrap 5 Layout Form Grid

Bootstrap 5 Layout Form Grid is used to create a complex form using grid classes. The form grid layout required multiple columns of different widths and alignments. To create a form grid, we use .row and .col classes. Form Grid Layout used Classes: .row: This class is used to create a row of a form layout..col: This class is used to create columns

2 min read

ReactJS MDBootstrap Grid System Layout

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Grid System Layout in ReactJS MDBootstrap. Grid System Layout is a great tool for creating layouts that are optimized for mobile devices. It's a powerf

3 min read

Angular MDBootstrap Grid System Layout

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Tooltips Component in Angular MDBootstap. Grid System Layout is a great tool for creating layouts that are optimized for mobile devices. Bootstrap’s

3 min read

How to create two column grid and two column layout using jQuery Mobile ?

jQuery Mobile provides CSS-based columns that are responsive. The grids have a width of 100%, grids do not have a background color, border, and padding. The grids contain elements in them, these elements can be made float side-by-side using the ui-block-a or ui-block-b or ui-block-c or ui-block-d class. Columns in a grid are of equal width. In 2 co

2 min read

Tachyons Layout Basic Grid

Tachyons Layout Basic Grid is a layout with rows and columns, making it easier to design web pages without having to use floats and positioning. We can create a variety of grids by combining widths, float, and padding. Syntax: <element-name class="class-name"></element-name> Tachyons Layout Basic Grid Classes: There is no class for Grid

2 min read

Tachyons Layout Debug with a Grid

Tachyons is a toolkit that is used to create a responsive website. In this article, we will learn how to define any layout using the Tachyons toolkit. Every website is divided into various parts like a header, menus, content, and a footer. Tachyons layout is used to define those sub-parts of a website. Layout debug: These classes are used to put a

2 min read

BootStrap 5 Grid system Auto-layout columns

Bootstrap's grid system is responsive. it's come with a flexbox and allows up to 12 columns across the page. you can also group the columns together. Auto-layout columns: To create easy column sizes without an explicit numbered class like .col-sm-6, Use breakpoint-specific column classes. Equal-width: The equal-width grid system is basically used t

2 min read

BootStrap 5 Layout Grid System

BootStrap5 Layout Grid system is responsive. It comes with a flexbox and allows up to 12 columns across the page. You can also group the columns together. The grid system is a powerful mobile-first responsive flexbox grid. How it works: Here’s how the grid system comes together: Its grid supports six responsive breakpoints. You can control containe

3 min read

React Chakra UI Grid Layout

React Chakra UI Grid Layout is an incredibly powerful and flexible component designed to streamline the creation of responsive and aesthetically pleasing grid-based designs within web applications. As an integral part of the Chakra UI library, this grid layout system offers developers a seamless integration with React, enabling them to build visual

2 min read

React MUI Grid Layout

React MUI Grid layout is a responsive layout grid that adapts to screen size and orientation, ensuring consistency across layouts. React MUI Grid LayoutMaterial UI Grid Component gives a responsive layout to all the screens and orientations Syntax: <Grid> ... </Grid>MUI Grid Layout Variants:Fluid grids: This grid type uses columns that

4 min read

How to Customize the grid layout in React Bootstrap?

In this article, we will be customizing the grid layout in React Bootstrap. Grid layout is used to align the elements with ting the grid format according to the requirements. In React Bootstrap, we can control the number of columns, spacing, responsiveness, and other properties to create a more attractive User Interface. PrerequisitesReactJSReact-B

5 min read

How to use grid element using the grid auto placement rules?

In this article, you will learn to use grid elements using the grid auto-placement rules. You can use auto as a property value on the grid to auto-enable the container to customize its size on the basis of the content of the items in the row or columns. Syntax: grid-template-rows : auto grid-template-columns: auto Property Value: auto : The size of

2 min read

Bootstrap 5 Grid system Grid tiers

Bootstrap Grid system is one of the most versatile layouts which we can use and it has different responsive variants which can be used to add custom responsiveness. Across the six default breakpoints, the grid works smoothly, and all these breakpoints can also be called Grid Tiers which can be changed using the SASS version. For this, we can use th

5 min read

How To Use Grid-Row-Align And Grid-Column-Align?

The grid-row-align and grid-column-align properties don't exist in CSS. Instead, CSS Grid uses properties like "align-items" and "justify-items" for controlling alignment across rows and columns, allowing precise positioning of grid items within their cells. so we will go to see how can we align the grid items. These are the following ways: Table o

3 min read

Difference between CSS Grid and CSS Flexbox

Grid:CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows. To get started you have to define a container element as a grid with display: grid, set the column an

4 min read

Article Tags :

Trending in News

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `

${comment_text}

`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `

${suggest_val}

`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `

Thank You!

Your suggestions are valuable to us.

You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.

`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('

'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('

'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });