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>
Related
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';
}
i created .container with some color & in that container header with some other color and text. now i want to center text. i am able to do that with grid but problem is my header color (background color of header) shrink to vertically and horizontally center too. i want only text to get in center not the color. hope i explained clearly. plz explain me how i can achieve that.
(
i am using visual studio. align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion
i need only text in center if i put image or logo that in center. i dont want background image to be compromise and i wanna use grid only.
i tried 6 grid commands align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion.
i am using visual studio. align-item align-content align-self(on header)justify-item,content,self nothing working for me plz clear my confusion
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
</div>
To center element on the grid and avoid them to shrink, you will need to set again a grid system on your children You can use flex or grid .
examples (might not be your grid, but needed a base that you did not provide, if that does not answer your question then, please, clarify your question)
Flex can be used on the grid children to allow centering alignement.
.container> div {
display:flex;
align-items:center;
justify-content:center;
background:tomato;
border:solid;
}
/* reconstruction of a grid */
.container {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows: minmax(150px,1fr);
grid-gap:1em;
}
.container .header, .container .footer {
background:lightblue;
grid-column:span 4;
}
.small-box-1 {
grid-column:2;
}
.main-content{
grid-column:2 / span 3
}
.side-bar {
grid-column:1;
grid-row:2 / span 2;
}
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
Grid can also be used on the grid children to allow centering alignement.
.container>div {
display: grid;
align-items: center;
justify-content: center;
background: tomato;
border: solid;
}
/* reconstruction of a grid */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, 1fr);
grid-gap: 1em;
}
.container .header,
.container .footer {
background: lightblue;
grid-column: span 4;
}
.small-box-1 {
grid-column: 2;
}
.main-content {
grid-column: 2 / span 3
}
.side-bar {
grid-column: 1;
grid-row: 2 / span 2;
}
<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</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>
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;
}
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
This one is really frustrating me and Im not sure if I worded that correctly.
Basicly, I need my page to stay at 100% height and not grow in height as it is a single page website.
I have a list in an aside and whenever I add content to the list it makes the list grow in size when I need the overflow to be hidden (I have a custom scrollbar applied in react).
Anyhow, the growing (weirdly) only occures when the list has the height of flex: 1;. When I add a fixed height, everything is fine.
Here is how it acts with a fixed height (should also be like this when no fixed height is applied):
When I remove the fixed height of the red box (the list) then it causes itself and the whole page to grow:
See it in action:
Heres the pen to see for yourself: https://codepen.io/anon/pen/zPJdoK
I know theres some unnecassary markup but I needed that to be sure that it represents the actual webpage I am working on.
Sorry for not being able to explain it any more detailed, Im a bit confused as of now...
Are you referring to something like this perhaps? I'm not too sure.
.container{
background: black;
width: 1000px;
height: 300px;
display: grid;
grid-template-columns: 180px 1fr 180px;
grid-template-rows: 1fr;
grid-template-areas: "nav main aside";
}
nav {
grid-area: nav;
background: blue;
}
main {
grid-area: main;
background: black;
display: flex;
flex-direction: column;
}
aside {
grid-area: aside;
background: green;
display: flex;
flex-direction: column;
}
aside > header, aside > footer{
height: 60px;
background: yellow;
}
aside > main {
flex: 3;
background: green;
}
aside > main > .content {
background: red;
margin: 10px;
max-height: 200px;
overflow-y:scroll;
}
.space_taker{
margin: 10px;
height: 30px;
background: white;
}
<div class="container">
<nav></nav>
<main></main>
<aside>
<header>
</header>
<main>
<div class="content">
<div class="space_taker">asdafasdfasdf</div>
<div class="space_taker">asdfasdf</div>
<div class="space_taker">asdfs</div>
<div class="space_taker">dfgdgf</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdfs</div>
<div class="space_taker">dfgdgf</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdfs</div>
<div class="space_taker">dfgdgf</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdasd</div>
</div>
</main>
<footer>
</footer>
</aside>
</div>