create a custom layout using css grid

Question

I am creating a custom layout using css grid like below. I am able to create most of the part but Main and Right div is not equal in my code. how to have equal width for the main and right div

Expected Output

current Output

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:auto auto;
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/5;
}
.menu{
  grid-row:2/4;
}
.footer{
  grid-column:2/5
}
.main{
  grid-column:2/2;
}
.right{
  grid-column:3/5;
}

<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Tudor Alexandru · Accepted Answer · 2020-12-25 14:34:32Z

A better and simple solution is to use areas, with the grid-area property you give a name to each box and with the grid-template-areas property you have full control over the layout.

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns: auto 1fr 1fr;

  grid-template-areas: 
  "header header header"
  "menu main right"
  "menu footer footer"
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-area: header;
}
.menu{
  grid-area: menu;
}
.footer{
  grid-area: footer;
}
.main{
  grid-area: main;
}
.right{
  grid-area: right;
}

<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Not really, with areas you can have more control over the layout and make the actual grid how you want based on the number of columns, you used grid-column and I'm not a big fan of that property.
@Paulie_D thanks man for making me laugh so hard. MY solution? Really?

Paulie_D · Accepted Answer · 2020-12-25 14:31:19Z

Use three columns grid-template-columns:auto 1fr 1fr:

This allows the menu to be a wide as it requires with the remaining width split equally between the other two elements.

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:auto 1fr 1fr;
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/-1;
}
.menu{
  grid-row:2/4;
}
.footer{
  grid-column:2/-1
}
.main{
  grid-column:2 ;
}
.right{
  grid-column:3;
}

<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Imran Rafiq Rather · Accepted Answer · 2020-12-25 15:05:10Z

You could have more control by setting the grid-template-columns: to a value in a way that we can control spacing later. I have used grid-template-columns:repeat(8,1fr).You can do adjustments as per your requirement( We don't make layout just for one screen but for many screens). This will control most of them. For mobile your can change this as per your requirement using media queries :)

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:repeat(8,1fr);
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/9;
}
.menu{
  grid-column:1/3;
  grid-row:2/4
}
.footer{
  grid-column:3/9;
}
.main{
  grid-column:3/6;
}
.right{
  grid-column:6/9;
}

<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

This is incorrect. The menu is not supposed to be as wide as the other items. And why 6 columns?
Listen sir. grid-template-row can be adjusted to do that. This is a general layout not a perfect one. We can customize it as per our need. But it will work on most of the screen break points.
Check the updated code now. I simply removed grid-template-rows and it is working good :)
This has nothing to do with rows. The layout only needs 3 columns only TWO of which are to be the same size.
The questioner wants the two columns main and right to be equal in all situations. RIght.. So Our task is to worry about those two. No where questions mentioned above Menu div. ANd this can still be organized

Ashan · Accepted Answer · 2020-12-25 15:22:25Z

body{
  background-color:#ecf0f1;
  font-family:sans-serif;
}
.grid-container{
  padding:10px;
  background-color:#2ecc71;
  display:grid;
  grid-template-columns:auto auto;
}
.grid-container > div{
  background-color:#34495e;
  border:1px solid #fff;
  color:#fff;
  padding:20px 30px;
  text-align:center;
}
.header{
   grid-column:1/5;
}
.menu{
  grid-row:2/4;
}
.footer{
  grid-column:2/5
}
.main{
  grid-column:2/4;
}
.right{
  grid-column:4/5;
}

<div class="grid-container">
  <div class="header" > Header </div>
  <div class="menu" > Menu  </div>
  <div class="main"> Main </div>
  <div class="right"> Right </div>  
  <div class="footer"> footer </div>
</div>

Try this way , there are two changes with your code, those are main and right tag in css style sheet

Collectives™ on Stack Overflow

create a custom layout using css grid

4 Answers 4

2 Comments

Comments

6 Comments

1 Comment

Hot Network Questions