This might not be a recommended question to ask as i am not supplying code examples, but i am trying to replicate the design in the image below. I am looking for somewhere with an example of the layout so i can copy the HTML and CSS straight from it (4 boxes aligned with 1 big box) can anyone point me in the right direction or what technology i can look at? I have looked at css-grid but i am struggling to find a similar example of what i am looking for?
Thanks!
Try using Bootstrap. This layout will be very easy to develop using Bootstrap's two column layout.
CSS Grid should be able to do the trick. Quick whip up below, you can obviously adjust the column and row gaps as well as add the 100% row at the bottom for the red button in your example... this should be a good starting point for you though.
HTML:
<div class="container">
<div class="Header">
<div class="TopHeader" style="background-color:red;">
</div>
<div class="BottomHeader" style="background-color:blue;">
</div>
</div>
<div class="LeftCol" ">
<div class="Square1 " style="background-color:orange; "></div>
<div class="Square2 " style="background-color:green; "></div>
<div class="Square3 " style="background-color:orange; "></div>
<div class="Square4 " style="background-color:green; "></div>
</div>
<div class="RightCol " style="background-color:yellow; ">
</div>
</div>
CSS:
.TopHeader {
grid-area: topheader;
}
.BottomHeader {
grid-area: bottomheader;
}
.Square1 {
grid-area: square1;
}
.Square2 {
grid-area: square2;
}
.Square3 {
grid-area: square3;
}
.Square4 {
grid-area: square4;
}
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 250px 800px;
align-content: space-around;
grid-template-areas: "header header" "leftcol rightcol";
}
.Header {
grid-area: header;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 50% 50%;
align-content: space-around;
grid-template-areas: "topheader" "bottomheader";
}
.LeftCol {
grid-area: leftcol;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 25% 25% 25% 25%;
grid-template-areas: "square1" "square2" "square3" "square4";
}
.RightCol {
grid-area: rightcol;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm new using CSS grids and watched a few videos about it and in all of them I saw the property grid-template-areas which seems to be cool because you just define the same name to span columns or rows for the grid item, but it hasn't worked for me, this is my html:
body {
display: grid;
grid-template-areas: "header header" "adds content";
grid-template-rows: 3em auto;
grid-template-columns: 20em 1fr;
}
.top-menu {
grid-area: "header";
grid-column: span 2;
background-color: #B6B0A9;
}
<div class="top-menu">
<ul>
<li>Hi</li>
<li>Lo</li>
</ul>
</div>
When I just use grid-area:"header"; the div with the class top-menu doesn't span in the two columns, that's why I had to use grid-column:span 2; is there something that I've missed about grid-template-areas behavior? Or this isn't the proper configuration?
That's something I also struggled with when starting with grid, it's easy to overlook:
when using grid-area you don't use " to define the area. So instead of "header" use header
body {
display: grid;
grid-template-areas: "header header" "adds content";
grid-template-rows: 3em auto;
grid-template-columns: 20em 1fr;
}
.top-menu {
grid-area: header;
grid-column: span 2;
background-color: #B6B0A9;
}
.adds {
grid-area: adds;
}
.content {
grid-area: content;
}
<div class="top-menu">
<ul>
<li>Hi</li>
<li>Lo</li>
</ul>
</div>
<div class="adds">
Some adds
</div>
<div class="content">
Here is some content
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>The grid-template-areas Property</h1>
<p>You can use the <em>grid-template-areas</em> property to set up a grid layout.</p>
<p>Item1, is called "myArea" and will take up the place of two columns (out of five):</p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
</div>
</body>
</html>
I must create a gallery, I have a various amount of photo and I would like to have always adjusted pictures. How can I do this with CSS grid?
In screen I show you my example - I have 4 photos I would like to have mixed sizes and at the same time - have alignment.
The problem is: I can't use simply css grid and arrange it properly, because I have also various amount of photo. So in one case, I have 4 photos, and another eg 15, and those photos always must be alignment. How can I do this? Maybe some library?
...
.wrapper {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3,100px);
height: 500px;
width: 500px;
grid-gap: 10px;
grid-template-areas:
"a a b"
"a a b"
"c d d";
align-content: space-between;
justify-content: space-around;
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
.item3 {
grid-area: c;
}
.item4 {
grid-area: d;
}
<div class="wrapper">
<div class="item1">Objet 1</div>
<div class="item2">Objet 2</div>
<div class="item3">Objet 3</div>
<div class="item4">Objet 4</div>
</div>
I'm trying to align a logo and navigation bar in one row across the top of a website using CSS grid.
I've written out the code but can't work out what I'm doing wrong as to why it's not working: https://codepen.io/chloewb/pen/wRRewQ
.logo{
grid-area: logo;
background:white;}
.navi{
grid-area: navi;
background:Yellow;}
.section1{
grid-area: features;
background:LightSalmon;}
.section2{
grid-area: technology;
background:PaleTurquoise;}
.section3{
grid-area: pricing;
background:LightPink;}
.section4{
grid-area: email;
background:PaleGreen;}
.container {
display: grid;
grid-template-rows: repeat (5, auto);
grid-template-columns: 1fr 1fr 1fr;
font-size: 40px;
width: 100%;
background: grey;
grid-template-areas:
"logo navi navi"
"features features features"
"technology technology technology"
"pricing pricing pricing"
"email email email";}
The first thing to notice is that, when you use display: grid on a container element, its direct children will become grid-items, and to these items is that the grid layout you build will apply.
So let's say we have the following:
<div class="container">
<div class="child-1">
<div class="child-2"></div>
<div class="child-2"></div>
</div>
<div class="child-1"></div>
<div class="child-1"></div>
<div class="child-1"></div>
</div>
And this CSS:
.container{
display: grid;
}
Then only the child-1 will become grid items and be able to get properties like grid-area applied to them; everything else inside .child-1, like .child-2 will behave normally, as if there's no Grid. Unless you also specify the .child-1 element to be a grid with display: grid.
In your case, you header element is a direct child of the .container element, so it is a grid item and can be positioned on any place on the grid, but the logo and navi elements are children of header, so the grid layout does not apply to them. You would either have to take them out of the header so the rules you wrote take effect, or create another grid in the header and let it use the full first row. See this example and notice how the nesting of the elements affect them.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(50px, auto);
grid-template-areas: "logo navi navi";
margin-bottom: 20px;
border: 1px solid black;
}
.logo {
border: 1px solid red;
grid-area: logo;
}
.navi {
border: 1px solid blue;
grid-area: navi;
}
<div class="container">
<div class="logo">Logo</div>
<div class="navi">Nav</div>
</div>
<div class="container">
<header>
<div class="logo">Logo</div>
<div class="navi">Nav</div>
</header>
</div>
I have a design where the entire page has a 3x3 column layout, however, one area of the page goes from 3 columns to 2, by just having negative space where every 3rd column used to be, like so:
Even when you add more div elements, like so:
I'm thinking the way to achieve this is using css grid with grid-areas, however, when uncommenting the two lines below this doesn't seem to work:
.inner {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
// grid-template-areas: "c c .";
> div {
// grid-area: c;
}
}
Am I going the right way about this or would using Flexbox be more appropriate?
Link to a Codepen
You can consider an empty element that will take the third column/first row and you will have the needed result:
.inner {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.inner div {
background:red;
height:100px;
}
.inner:after {
content:"";
grid-row:1;
grid-column:3;
}
<div class='container'>
<h2>Title</h2>
<div class='inner'>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
</div>
</div>
UPDATE
with more element you can try this:
.inner {
display: grid;
grid-column-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.inner div {
background:red;
height:100px;
margin-bottom:2rem; /*to replace row gap*/
}
.inner:after {
content:"";
grid-row:1 / span 50; /*take all the third column*/
grid-column:3;
}
<div class='container'>
<h2>Title</h2>
<div class='inner'>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
<div>
Hey
</div>
</div>
</div>
I know there are similar questions but this is specifically asking how to do this using CSS Grid Layout.
So we have this basic grid setup:
HTML (with sidebar):
<div class="grid">
<div class="content">
<p>content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
CSS:
.grid {
display: grid;
grid-template-columns: 1fr 200px;
}
To create a layout that looks something like this:
| content | sidebar |
If the page doesn't have a sidebar though, ie. the html looks like this but with the same CSS:
HTML (no sidebar):
<div class="grid">
<div class="content">
<p>content</p>
</div>
</div>
The page layout looks like this (dashes represent empty space)
| content | ------- |
I know why it does that, the grid column is still defined in the grid-template-columns rule.
I'm just wondering how to tell the grid that if there is no content, then fill the remaining space similar to how flex-grow works for flexbox.
The desired result would look like this if no sidebar is present.
| content |
Don't define the columns explicitly with grid-template-columns.
Make the columns implicit instead and then use grid-auto-columns to define their widths.
This will allow the first column (.content) to consume all space in the row when the second column (.sidebar) doesn't exist.
.grid {
display: grid;
grid-auto-columns: 1fr 200px;
}
.content {
grid-column: 1;
}
.sidebar {
grid-column: 2;
}
.grid > * {
border: 1px dashed red; /* demo only */
}
<p>With side bar:</p>
<div class="grid">
<div class="content">
<p>content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
</div>
</div>
<p>No side bar:</p>
<div class="grid">
<div class="content">
<p>content</p>
</div>
</div>
You can get closer by using content sizing keywords, something like:
.grid {
display: grid;
grid-template-columns: 1fr fit-content(200px);
}
.sidebar {
width: 100%;
}
The fit-content keyword will look at the size of the content and act like max-content until it gets to the value you pass in.
In reality you probably wouldn't need to stick a size on sidebar as the content is likely to dictate a size of at least 200 pixels (for example) but you can play around with this.
I think I know the definitive answer to this question now. The problem with the answers so far is that they don't explain how to handle a sidebar that is on the left side of the main content (mainly because I didn't ask for it in the original question).
<div class="grid">
<nav>
<p>navigation</p>
</nav>
<main>
<p>content</p>
</main>
<aside>
<p>sidebar</p>
</aside>
</div>
You can use this CSS:
.grid {
display: grid;
grid-template-columns: fit-content(200px) 1fr fit-content(200px);
}
nav, aside {
width: 100%;
}
/* ensures that the content will always be placed in the correct column */
nav { grid-column: 1; }
main { grid-column: 2; }
aside { grid-column: 3; }
This is also a good use case for grid-areas
.grid {
display: grid;
grid-template-columns: fit-content(200px) 1fr fit-content(200px);
grid-template-areas: "nav content sidebar";
}
nav, aside {
width: 100%;
}
/* ensures that the content will always be placed in the correct column */
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: sidebar; }
An IE compatible version would look like this:
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto;
}
nav, aside {
width: 100%; /* Ensures that if the content exists, it takes up max-width */
max-width: 200px; /* Prevents the content exceeding 200px in width */
}
/* ensures that the content will always be placed in the correct column */
nav {
-ms-grid-column: 1;
grid-column: 1;
}
main {
-ms-grid-column: 2;
grid-column: 2;
}
aside {
-ms-grid-column: 3;
grid-column: 3;
}