so I am new to CSS grids and I've been toying around with it. I'm trying to see if I can match the layout of this mock-up in a general sense with some experimental code I've been writing: https://ibb.co/GFYqMRx
Here is my HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="body">
<div class="header">Header</div>
<div class="side-navigation">Side Navigation</div>
<main class="main">
<div class="item search">Search</div>
<div class="item traffic">Traffic</div>
<div class="item daily-traffic">Daily Traffic </div>
<div class="item mobile-users">Mobile Users</div>
<div class="item social-stats">Social Stats</div>
<div class="item new-members">New Members</div>
<div class="item recent-activity">Recent Activity</div>
<div class="item message-user">Message User</div>
<div class="item settings">Settings</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Here is my CSS:
* {
box-sizing: border-box;
}
.item {
border: 1px red solid;
}
.header {
background-color: purple;
grid-area: header;
}
.side-navigation {
background-color: orange;
grid-area: side-navigation;
}
.main {
background-color: grey;
grid-area: main;
}
.search {
grid-area: search;
}
.traffic {
grid-area: traffic;
}
.daily-traffic {
grid-area: daily-traffic;
}
.mobile-users {
grid-area: mobile-users;
}
.social-stats {
grid-area: social-stats;
}
.new-members {
grid-area: new-members;
}
.recent-activity {
grid-area: recent-activity;
}
.message-user {
grid-area: message-user;
}
.settings {
grid-area: settings;
}
body {
display: grid;
grid-template-rows: 80px 80px 1fr;
grid-template-areas:
"header"
"side-navigation"
"main";
}
#media (min-width: 769px) {
body {
grid-template-columns: 80px 1fr;
grid-template-rows: 80px 1fr;
grid-template-areas:
"header header"
"side-navigation main"
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 150px;
}
}
I was first able to create the desired layout by manipulating grid lines, but I wanted to see if I could do the same thing by solely utilizing the grid-template-areas property.
For screen sizes greater than 769px, I split the nested main container into two columns, 1fr each, but I ended up getting some weird effect with a third column being installed:
Why am I unable to create equal width columns in the nested main container? Shouldn't my grid be equally split in half if I put two fr units for grid-template-columns?
Everything was working perfectly until I applied grid to the nested main container.
And why are my grid-items jumbled up like this at the bottom of the screen?
I think it has to do with all of the grid-area: labels with no grid-template-areas: rule to define where they go. I just checked your code in dev tools and when i removed those grid-area: labels it became a 2 column grid.
add a grid-template-areas for .main
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 150px;
grid-template-areas:
"search traffic"
"daily-traffic mobile-users"
"social-stats new-members"
"recent-activity message-user"
"settings ............";
}
all extra(more than 1) white space in grid-template-areas is ignored so you can add extra spaces to align your columns. Also, notice the '.' at the end you use '.' or multiple(like the white space extra just gets ignored) to signify leaving that cell empty. the whole thing breaks if you remove those periods at the end, every cell must be accounted for in your grid-template-areas.
Rachel Andrew has a lot of great material on CSS grid.
https://www.youtube.com/watch?v=RssSS_xhv2E
This is because you are giving grid-areas to your elements withing your main grid, without actually using the grid-area property on main. I've removed these in the snippet and the main grid displays with 2 equal columns:
* {
box-sizing: border-box;
}
.item {
border: 1px red solid;
}
.header {
background-color: purple;
grid-area: header;
}
.side-navigation {
background-color: orange;
grid-area: side-navigation;
}
.main {
background-color: grey;
grid-area: main;
}
.search {}
.traffic {}
.daily-traffic {}
.mobile-users {}
.social-stats {}
.new-members {}
.recent-activity {}
.message-user {}
.settings {}
body {
display: grid;
grid-template-rows: 80px 80px 1fr;
grid-template-areas: "header" "side-navigation" "main";
}
#media (min-width: 769px) {
body {
grid-template-columns: 80px 1fr;
grid-template-rows: 80px 1fr;
grid-template-areas: "header header" "side-navigation main"
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 150px;
}
}
<body>
<div class="header">Header</div>
<div class="side-navigation">Side Navigation</div>
<main class="main">
<div class="item search">Search</div>
<div class="item traffic">Traffic</div>
<div class="item daily-traffic">Daily Traffic </div>
<div class="item mobile-users">Mobile Users</div>
<div class="item social-stats">Social Stats</div>
<div class="item new-members">New Members</div>
<div class="item recent-activity">Recent Activity</div>
<div class="item message-user">Message User</div>
<div class="item settings">Settings</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="app.js"></script>
</body>
Related
Right, I have a grid template lay out for my website where, on the desktop version, there are two columns. As this is shrunken down to a mobile version I would like this to be one column which fills the whole width of the device.
How would I go about doing this?
Here is the code below.
Thanks.
.grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
/*grid-template-rows: repeat(6, 1fr);*/
grid-template-rows:auto;
grid-template-areas:
"Title Content-Upper"
"Title Content-Lower";
grid-gap: 20px;
}
.Title{
grid-area: Title;
}
.Content-Upper{
grid-area: Content;
}
.Content-Lower{
grid-area: Content;
border-style: solid 2px black;
}
<div class="grid">
<div class="Title">
<div class="wrap__center">
<h1 style="font-size: 43px;" class="header__main" ><span id="">Title</span></h1>
</div>
</div>
<a href="#" class="Content content-update-ceo">
<h1 class="header__main">Uper Column</h1>
</a>
<a href="" class="Content content-update-covid">
<h1 class="header__main" style="width: 50%;">Lower Column</h1>
</a>
</div>
Grid systems can be affected with media queries just like any other CSS property. By default, you can set up a grid with one column, and then expand it to two columns when the viewport is wide enough. Note the changes to the grid-template-area definitions as well.
.grid {
display: grid;
/* one column with three rows for mobile */
grid-template-columns: auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"Title"
"Content-Upper"
"Content-Lower";
grid-gap: 20px;
}
#media (min-width: 768px) {
.grid {
/* two columns with two rows for tablet and up */
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"Title Content-Upper"
"Title Content-Lower";
grid-gap: 20px;
}
}
.Title {
grid-area: Title;
}
.Content-Upper {
grid-area: Content;
}
.Content-Lower {
grid-area: Content;
border-style: solid 2px black;
}
<div class="grid">
<div class="Title">
<div class="wrap__center">
<h1 style="font-size: 43px;" class="header__main"><span id="">Title</span></h1>
</div>
</div>
<a href="#" class="Content content-update-ceo">
<h1 class="header__main">Uper Column</h1>
</a>
<a href="" class="Content content-update-covid">
<h1 class="header__main" style="width: 50%;">Lower Column</h1>
</a>
</div>
#media screen and (max-width: 414px) {
.grid{
grid-template-columns: repeat(1, 1fr);
}
}
It's as easy as that ;)
So I'm trying to set up a grid-formatted website page with pure HTML and CSS, as you will see in my code below.
I'm trying to alternate between two div tags going down the left hand column of Header & inner-placeholder tags.
You will see the HTML layout alignment with the grid-template-area clearly laid out, along with the number of rows as specified by grid-template-rows
So why do I get just a red box at the corner of the screen when it's fairly obvious what I want to have as per the illustration - except for a curved box followed by a straight box, followed by a curved box etc going down the left hand side?
I have tried to change the fr number to accommodate the number of rows on the left hand side.
Thank you.
Illustration
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"Title Title"
"Header Content"
"inner-placeholder Content"
"Header Content"
"inner-placeholder Content"
"Sidebar Content"
"Footer Footer";
grid-gap: 10px;
}
.Title{
grid-area: Title;
}
.Header{
grid-area: Header;
}
.Sidebar{
grid-area: Sidebar;
}
.Content{
grid-area: Content;
}
.Footer{
grid-area: Footer;
}
.inner-placeholder{
grid-area: inner-placeholder;
}
.grid div:nth-child(even){
background-color: red;
}
.grid div:nth-child(odd){
background-color: green;
}
<div class="grid">
<div class="Title">Title
</div>
<div class="Header">Header
</div>
<div class="inner-placeholder">
</div>
<div class="Header">Header
</div>
<div class="inner-placeholder">
</div>
<div class="Sidebar">Sidebar
</div>
<div class="Content">Content
</div>
<div class="Footer">Footer
</div>
</div>
It seems you misunderstood how grid areas work. If any grid area spans more than 1 row or column, it needs to form a square or a rectangle. Which means they also need to be in one continuous sequence as a 2x2 or 1x3 and so on, in your case you split the Header area and placeholder area between each other, which breaks the grid.
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
"Title Title"
"Header Content"
"inner-placeholder Content"
"Header2 Content"
"inner-placeholder2 Content"
"Sidebar Content"
"Footer Footer";
grid-gap: 10px;
}
.Title {
grid-area: Title;
}
.Header {
grid-area: Header;
}
.Header2 {
grid-area: Header2;
}
.Sidebar {
grid-area: Sidebar;
}
.Content {
grid-area: Content;
}
.Footer {
grid-area: Footer;
}
.inner-placeholder {
grid-area: inner-placeholder;
}
.inner-placeholder2 {
grid-area: inner-placeholder2;
}
.grid div:nth-child(even) {
background-color: red;
}
.grid div:nth-child(odd) {
background-color: green;
}
<div class="grid">
<div class="Title">Title</div>
<div class="Header">Header</div>
<div class="inner-placeholder"></div>
<div class="Header2">Header2</div>
<div class="inner-placeholder2"></div>
<div class="Sidebar">Sidebar</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</div>
My goal is to break my screen in four different blocks that are not the same size, just like in the picture (block one and two should be the same size). I tried using bootstrap which kinda works but it makes it scrollable and I want to avoid that. Is there a way to make it not scrollable and have each block in a fixed size? Any tips would be appreciated. I'm using bootstrap and angularjs.
This is what I have so far, but I want to make full screen.
https://codepen.io/BrunoTrax/pen/XWWVNgL
<style>
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: col1-start / col3-start;
grid-row: row2-start ;
}
.b {
grid-column: col3-start ;
grid-row: row1-start / row2-end;
}
.c {
grid-column: col1-start;
grid-row: row1-start ;
}
.d {
grid-column: col2-start ;
grid-row: row1-start ;
}
</style>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
</div>
You should check out CSS "Grid's". Basically, you can declare a grid inside your css and use the grid-template-columns property to display your blocks in various arrangements. Here is a good resource that shows you how to create a custom layout.
The grid property also allows you to declare a height and width which will fix your scrolling problem.
Check this out and start experamenting.
CSS
.grid {
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
.grid > header {
grid-area: head;
background: #eee;
}
.grid > navLeft {
grid-area: nav;
background-color: #a072;
}
.grid > main {
grid-area: main;
background-color: #8510ff;
}
.grid > footer {
grid-area: foot;
background-color: #8cffa0;
}
HTML
<header> Hello</header>
<navLeft> Hello</navLeft>
<main> Hello</main>
<p> Hello</p>
<p> Hello</p>
</div> ```
I have made a blog design using CSS grid, having used inline-block to pack DIVs together.
In my blog I have 2 picture-DIVS of height 60 that I want to show next to a text-DIV of height 120. Only the first picture is shown next to the text.
Why is the second picture shown below the text, and please get some pointers on how I can fix this.
.GridCont {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas: "content content content content" "content content content content" "content content content content";
}
.PostContent {
grid-area: content;
background: #B8E986;
}
.Content {
background: #000000;
width: 35%;
color: white;
display: inline-block;
}
.box1 {
height: 120vh;
}
.PicContent {
background: blue;
color: white;
display: inline-block;
}
.pic1 {
height: 60vh;
width: 50%;
}
.pic2 {
height: 60vh;
width: 45%;
}
.cTextP {
padding: 20px;
}
<div class="GridCont">
<div class="PostContent">
<div class="PicContent pic1">
<div class="cTextP">Picture #1</div>
</div>
<div class="Content box1">
<div class="cTextP">Content #1</div>
</div>
<div class="PicContent pic2">
<div class="cTextP">Picture #2</div>
</div>
</div>
</div>
Code is at this JS-fiddle
Why would the second image show right beneath the first? There is no reason for that.
The second image is on the second row.
The second row goes right beneath the first row.
More specifically, the first row is occupied by two elements: image #1 and the content box. The height of the first row is defined by the tallest element. In this case, that would the content box.
So, because image #1 doesn't extend the full height of row #1, there will be a gap between images.
Here's an even more detailed explanation of the problem:
Is it possible for flex items to align tightly to the items above them?
(It's a flexbox-related post, but the logic applies here, as well.)
Instead of inline-block, use Grid properties to get the content box to span both rows:
.PostContent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 60vh 60vh;
grid-gap: 1em;
grid-template-areas: " pic1 box1 "
" pic2 box1 ";
}
.box1 {
grid-area: box1;
}
.pic1 {
grid-area: pic1;
}
.pic2 {
grid-area: pic2;
}
.PostContent { background: #B8E986; }
.PicContent { background: blue; color: white; }
.Content { background: #000000; color: white; }
.cTextP { padding: 20px;}
<div class="GridCont">
<div class="PostContent">
<div class="PicContent pic1">
<div class="cTextP">Picture #1</div>
</div>
<div class="Content box1">
<div class="cTextP">Content #1</div>
</div>
<div class="PicContent pic2">
<div class="cTextP">Picture #2</div>
</div>
</div>
</div>
revised jsfiddle
Also note that grid properties work only between parent and child elements.
This will fix your problem:
<div class="grid-container">
<div class="image1"></div>
<div class="image2"></div>
<div class="text"></div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "image1 image1 text text" "image2 image2 text text";
}
.image1 { grid-area: image1; }
.image2 { grid-area: image2; }
.text { grid-area: text; }
You can see the working example over here:
https://codepen.io/dennisperremans/pen/NeqNJp
I want to make my website using CSS grid system but it seems not to be working. Here is my code:
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
When using the grid-template-areas property, string values must have the same number of columns.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" "about-us about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
You can use a period, or an unbroken line of periods, to represent an empty cell (spec reference).
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq" " ... about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>
From the Grid spec:
7.3. Named Areas: the grid-template-areas
property
All strings must have the same number of columns, or else the declaration is invalid.
If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.
Non-rectangular or disconnected regions may be permitted in a future version of this module.
Note: As stated in the spec, in addition to an equal number of columns, grid areas must also be rectangular (see this post for more details).
If this:
Is the desired result, then you've only made a minor error.
You've set the grid to be a 2 x 2 square here:
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
But you aren't filling all the space.
grid-template-areas: "logo faq", "about-us";
That line of code is saying "In the top two squares put logo and faq respectively. In the bottom two rows put about-us" and that causes an error. If you want one grid-area to fill the entire space then you need to declare it twice. Thus the above line becomes:
grid-template-areas: "logo faq", "about-us about-us";
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "logo faq", "about-us";
}
.logo {
background-color: blue;
grid-area: logo;
}
.faq {
background-color: red;
grid-area: faq;
}
.aboutUs {
background-color: cyan;
grid-area: about-us;
}
<div class="grid">
<div class="logo">
LOGO
</div>
<div class="faq">
FAq
</div>
<div class="aboutUs">
About-us
</div>
</div>