Using CSS to Utilize Grid or Table Display

Question

Using CSS to Utilize Grid or Table Display

Hey everyone, I could really use some assistance with formatting a layout using CSS. This is the look I am aiming for:

https://i.sstatic.net/HCIJ0.png

I have made some progress with my CSS but I'm struggling to get the menu zone to expand to the full height. Any suggestions? My layout is based on display grid.

.page {
  display: grid;
  grid-template-columns: 29% 71%;
  justify-content: flex-start;
  align-content: start; 
}
.section-header {
  grid-column: 1/3;
  display: grid;
  grid-row: row;
  background-color: blue;
  color: #fff;
}
.zone-menu-wrapper {
  grid-row: 1/3;
  background-color: #286dc5;
}
.zone-topper-wrapper {
  grid-row: 1/3;
}
.section-main {
  grid-column: 2/3;
  background-color: orange;
}
.section-footer {
  grid-column: 2/3;
  background-color: yellow;
}
.zone-branding-wrapper {
  grid-column: 2/3;
}

.zone-menu {
  width: 29%;
  display: inline-block;
}

<div class="page"> <header class="section-header"> <div class="zone-topper-wrapper">Top Zone</div> <div class="zone-menu-wrapper">Menu Zone</div> </header> <main class="section-main"> <div class="zone-branding-wrapper">Branding Zone</div> <div class="zone-content-wrapper">Content Zone</div> </main> <footer class="section-footer"> <div class="zone-footer-wrapper">Footer Zone</div> </footer>

html css grid frontend

Answer 1

Answer №1

If you're looking for a solid solution that offers better support than traditional grid columns, consider implementing a flexbox layout. Alternatively, for even more robust support, you can opt for a float-based approach.

Here are some key points to keep in mind:

flex-grow: This property instructs an element to occupy any remaining space within its parent container. It's particularly useful for creating flexible layouts with unknown widths.
min-height: 100vh on the body element: Setting the minimum height of the body to 100% of the viewport height ensures that your layout fills the entire screen even if there isn't enough content. This provides a context for elements to grow into when using flex-grow.
100vh for min-height: Utilizing viewport units allows you to specify the minimum height of the body element as 100% of the viewport height.

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

.wrap {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  background-color: indianred;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

header {
  background-color: darkseagreen;
}

aside {
  background-color: skyblue;
}

main {
  flex-grow: 1;
  background-color: gold;
}

<header>
  Header
</header>

<div class="wrap">

  <aside>
    Sidebar
  </aside>
  
  <div class="content">
  
    <main>
      Main
    </main>
    
    <footer>
      Footer
    </footer>
    
  </div>
  
</div>

Answer 2

If you're looking for a solid solution that offers better support than traditional grid columns, consider implementing a flexbox layout. Alternatively, for even more robust support, you can opt for a float-based approach.

Here are some key points to keep in mind:

flex-grow: This property instructs an element to occupy any remaining space within its parent container. It's particularly useful for creating flexible layouts with unknown widths.
min-height: 100vh on the body element: Setting the minimum height of the body to 100% of the viewport height ensures that your layout fills the entire screen even if there isn't enough content. This provides a context for elements to grow into when using flex-grow.
100vh for min-height: Utilizing viewport units allows you to specify the minimum height of the body element as 100% of the viewport height.

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

.wrap {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  background-color: indianred;
}

.content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

header {
  background-color: darkseagreen;
}

aside {
  background-color: skyblue;
}

main {
  flex-grow: 1;
  background-color: gold;
}

<header>
  Header
</header>

<div class="wrap">

  <aside>
    Sidebar
  </aside>
  
  <div class="content">
  
    <main>
      Main
    </main>
    
    <footer>
      Footer
    </footer>
    
  </div>
  
</div>

Answer 3

Answer №2

Utilizing the grid layout allows for a more streamlined and efficient use of markup:

body {
  display: grid;
  grid-template-columns: 29% 71%;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header" "nav main" "nav footer";
  height: 100vh
}

header {
  grid-area: header ;
}

nav {
  grid-area: nav ;
  grid-column: 1;
}

main,
footer {
  grid-column: 2;/* or grid-area for each of them */
}

/*styling*/
header,
nav {
  background: tomato;
}

main {
  background: turquoise
}

footer {
  background: orange;
  }
body>* {
  padding:1em;
  box-shadow:0 0 1px
}

<header>header</header>
<nav> nav </nav>
<main> main</main>
<footer>footer</footer>

Answer 4

Utilizing the grid layout allows for a more streamlined and efficient use of markup:

body {
  display: grid;
  grid-template-columns: 29% 71%;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header" "nav main" "nav footer";
  height: 100vh
}

header {
  grid-area: header ;
}

nav {
  grid-area: nav ;
  grid-column: 1;
}

main,
footer {
  grid-column: 2;/* or grid-area for each of them */
}

/*styling*/
header,
nav {
  background: tomato;
}

main {
  background: turquoise
}

footer {
  background: orange;
  }
body>* {
  padding:1em;
  box-shadow:0 0 1px
}

<header>header</header>
<nav> nav </nav>
<main> main</main>
<footer>footer</footer>

Answer 5

Answer №3

<div class="page">
    <header class="section-header">
        <div class="zone-topper-wrapper">Top Zone</div>

    </header>
  <div class="zone-menu-wrapper">Menu Zone</div>
    <main class="section-main">
    <div class="zone-branding-wrapper">Branding Zone</div>
        <div class="zone-content-wrapper">Content Zone</div>
    </main>
    <footer class="section-footer">
        <div class="zone-footer-wrapper">Footer<br> Zone</div>
    </footer>
</div>

CSS

.page{
  display: grid;
  grid-template-columns:29% 71%;
  justify-content: flex-start;
  align-content: start; 
}
.section-header{
 grid-column: 1/3;
 display:grid
 grid-row:row;
 background-color:blue;
 color:#fff;
}
.zone-menu-wrapper{
grid-row:2/4;
background-color:#286dc5;
}
.zone-topper-wrapper{
grid-row:1/3;
}
.section-main{
 grid-column:2/3;
 background-color:orange;
}
.section-footer{
  grid-column: 2/3;
  background-color:yellow;
}
.zone-branding-wrapper{
  grid-column:2/3;
}

.zone-menu{
width:29%;
display:inline-block;
}

Link to codepen

Answer 6

<div class="page">
    <header class="section-header">
        <div class="zone-topper-wrapper">Top Zone</div>

    </header>
  <div class="zone-menu-wrapper">Menu Zone</div>
    <main class="section-main">
    <div class="zone-branding-wrapper">Branding Zone</div>
        <div class="zone-content-wrapper">Content Zone</div>
    </main>
    <footer class="section-footer">
        <div class="zone-footer-wrapper">Footer<br> Zone</div>
    </footer>
</div>

CSS

.page{
  display: grid;
  grid-template-columns:29% 71%;
  justify-content: flex-start;
  align-content: start; 
}
.section-header{
 grid-column: 1/3;
 display:grid
 grid-row:row;
 background-color:blue;
 color:#fff;
}
.zone-menu-wrapper{
grid-row:2/4;
background-color:#286dc5;
}
.zone-topper-wrapper{
grid-row:1/3;
}
.section-main{
 grid-column:2/3;
 background-color:orange;
}
.section-footer{
  grid-column: 2/3;
  background-color:yellow;
}
.zone-branding-wrapper{
  grid-column:2/3;
}

.zone-menu{
width:29%;
display:inline-block;
}

Link to codepen

Using CSS to Utilize Grid or Table Display

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible in Angular to first escape HTML strings and then add HTML markup?

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

What sets apart auto, 0, and no z-index values?

Activating the CSS :active selector for elements other than anchor tags

Guide to capturing and playing audio on iOS6 with HTML5

What could be causing my CSS dropdown menu to not display properly?

Leveraging CSS display:inline-block or float:left for arranging elements containing different lengths of text

Reduce the value in the database when a button is clicked using PHP

How can I prevent Bootstrap from conflicting with my custom styles?

Text in the middle of a button

Creating a spinning Cube with separate fields for x, y, and z rotation speeds: a step-by-step guide

Trouble encountered when utilizing jQuery for XML to HTML conversion and vice versa (CDATA mistakenly transformed into HTML comments)

Guide to parsing the HTML structure of a webpage from a different domain

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

Unable to get the div to properly follow when scrolling, even when using the fixed position attribute

I keep encountering an issue when trying to load the website <a href="linktext.com">linktext.com</a> using SQL and PHP

How can I make my div change color when the check-box is selected?

What is the best way to add borders to table cells that have a non-zero value

Dynamic content moves unpredictably when adding or modifying TextBoxes or DropDownList items

What causes the entire set of dynamically created cards to collapse when using the toggle collapse button in ngb-bootstrap's Collapse control?