I am designing my own website using HTML and CSS. I have decided to use a grid as follows:
/* Style the grid container */
.item1 {
grid-area: logo;
}
.item2 {
grid-area: cta;
}
.item3 {
grid-area: menu;
}
.item4 {
grid-area: spacer;
}
.item5 {
grid-area: left;
}
.item6 {
grid-area: right;
}
.grid-container {
display: grid;
grid-template-areas: 'logo cta cta' 'menu menu menu' 'spacer spacer spacer' 'left right right';
grid-gap: 10px;
padding: 10px;
}
.grid-container>div {
border: 1px solid rgba(0, 0, 0, 0.8);
}
.item1 img {
min-width: 200px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.grid-container {
grid-template-areas: 'logo' 'cta' 'menu' 'spacer' 'left' 'right';
}
}
<div class="grid-container">
<div class="item1">
<img src="Images/DN signatur es/dn_gold.png" style="width:25%" alt="" />
</div>
<div class="item2">
<p>dermot at dermotnolan dot ie</p>
</div>
<div class="item3">
<div class="topnav" id="myTopnav">
<a class="mnu active" href="#home">Home</a>
<a class="mnu" href="#about">About me</a>
<a class="mnu" href="#gallery">Gallery</a>
<a class="mnu" href="#imw">IMW</a>
<a class="mnu" href="#blog">Blog</a>
<a class="icon" href="javascript:void(0);" style="font-size:18px;" onclick="myFunction()">☰</a>
</div>
</div>
<div class="item4">
<br/>
</div>
<div class="item5">
<h2>Column 1 in Myriad</h2>
<h5>A heading in Consolas</h5>
</div>
<div class="item6">
<h2>Column 1 in Myriad</h2>
<h5>A heading in Consolas</h5>
<h2>Column 1 in Myriad</h2>
<h5>A heading in Consolas</h5>
<h2>Column 1 in Myriad</h2>
<h5>A heading in Consolas</h5>
</div>
</div>
My issue is that it looks like this:
Where I am expecting the left-most items (logo, left) to be one-column wide...
I'm certain I'm missing something simple, if anyone can make suggestions I'd be grateful.
Thanks in advance,
Dermot
I think you have forgotten to call your CSS file in the HTML document. you will need to call your CSS file in the head of your HTML file like the example below:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="/css/styles.css">
<title></title>
</head>
I have attached a picture of my output.[screenshot of the picture][1]
[1]: https://i.stack.imgur.com/8LxGK.png
Actually I had referenced my CSS - what you see above is simply an excerpt from the code.
However, I managed to find a good solution which works perfectly:
=================================================
grid elemnent styling copied from
https://css-tricks.com/simple-named-grid-areas/#top-of-site
as well as W3Schools
=================================================
*/
/*HEADER area */
.gridheader {
display: grid;
grid-gap: 10px;
padding: 10px;
grid-template-columns: 300px 1fr 1fr;
grid-template-areas:
'logo logo cta'
'menu menu menu'
'spacer spacer spacer';
}
/*MAIN area */
.gridcolumns {
display: grid;
grid-gap: 10px;
padding: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: 'left right right';
}
Related
I was searching a way to make a responsive design like so
I have 3 divs inside a parent div
<div style="display: flex">
<div class="logo">some image here</div>
<div class="menu-items">
Home
...
</div>
<div class="login-logout">Here is the login component</div>
</div>
How can I make a responsive version of this to be something like this using only css and sass?
<div style="display: flex; flex-direction: column">
<div style="display: flex">
<div class="logo">some image here</div>
<div class="login-logout">Here is the login component</div>
</div>
<div class="menu-items">
Home
...
</div>
</div>
I want the middle div to stay bellow the other two
I have a guess that this can be possible using grid layout, but honestly I don't understand very much about it and prefer using flex. So if this could be achieved using flex I would be very much appreciated
Edit:
An image of how I want the layout to be.
flex is basically one dimensional whereas grid allows layout in two dimensions.
This snippet takes your code but sets the container to display grid.
grid-template areas are laid out for the wider screens in the ratio 2/3/1 and in the narrower ones in the ratio 2/1 in the top line.
Obviously you'll want to set the relative sizes suitable for your particular case.
.container {
width: 100vw;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-areas: 'logo logo menu menu menu login';
gap: 2vw;
padding: 2vw;
box-sizing: border-box;
}
.container>* {
border: 3px solid;
box-sizing: border-box;
}
#media (max-width: 768px) {
.container {
grid-template-columns: repeat(3, 1fr);
grid-template-areas: 'logo logo login' 'menu menu menu';
}
}
.logo {
grid-area: logo;
}
.menu-items {
grid-area: menu;
}
.login-logout {
grid-area: login;
}
/* borders added fordemo */
.logo {
border-color: red;
}
.menu-items {
border-color: blue;
}
.login-logout {
border-color: green;
}
<div class="container">
<div class="logo">some image here</div>
<div class="menu-items">
Home ...
</div>
<div class="login-logout">Here is the login component</div>
</div>
I am just learning how to use CSS grid layout from a crash course. While tinkering around with the grid-template-columns property, a white space has appeared under one of my cat images that I cannot get rid of.
This is my HTML:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: 200px 200px 1fr;
}
.gallery img {
width: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<main>
<div class="gallery">
<img src="https://placeimg.com/640/480/animals" alt='' />
<img src="https://placeimg.com/640/480/arch" alt='' />
<img src="https://placeimg.com/640/480/nature" alt='' />
<img src="https://placeimg.com/640/480/people" alt='' />
<img src="https://placeimg.com/640/480/tech" alt='' />
</div>
</main>
Can someone help me resolve this?
Make the third image into 3 rows:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: 200px 200px 1fr;
}
.gallery img {
width: 100%;
}
.gallery img:nth-child(3) {
grid-row: span 3;
}
<div class="gallery">
<img src="https://placeimg.com/640/480/animals" >
<img src="https://placeimg.com/640/480/arch" >
<img src="https://placeimg.com/640/480/nature" >
<img src="https://placeimg.com/640/480/people" >
<img src="https://placeimg.com/640/480/tech" >
</div>
This depends on what you want to have happen instead.
grid-template-columns specifies your grid columns. By setting it to: 200px 200px 1fr you're basically instructing the browser:
There should be 3 columns for my content.
Set the first and second columns to 200px wide
Use flex for the third column.
So instead, one option would be to make use of a repeat function. The following will make 3 equal columns:
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
img {
width: 100%;
}
Also, FWIW keep an eye on both your HTML and CSS. In the HTML, you should have closing tag for <main></main>. And if you're working with vanilla CSS (not Sass or Less), your declarations for img should be outside those for .gallery.
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'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>
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;
}