Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I would like to create something like this.....
However, when i put text in one of the grid items.. the div stretches like this
You just need to add grid-template-columns in your css like this:-
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
background-color: #000;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
<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>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am trying to create CSS grid components but one problem keeps poping up and for the life of me I cant find any solution.
So for a basic example:
.grid {
display: grid;
grid-gap: 1px;
background: black;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item {
background: white;
}
<div class="grid">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
What gives the following result:
The question is:
How do you remove the side space, the black one to be the same as the grid gap?
It is a bit simplistic, but a major problem. What am i missing?
I tried margins, and puddings, all sorts of "work-around" but all of them made different problems down the way.
I feel like this had to have an answer already, but for the life of me I can't find a proper solution.
body {margin: 0;} works for me.
body {
margin: 0;
}
.grid {
display: grid;
grid-gap: 1px;
background: black;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item {
background: white;
}
<div class="grid">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
Ok so I Figured it out. So I'm not sure whether this is a bug or I'm missing something, but the solution is to wrap the grid in to a wrapper like:
<style>
.grid-container {
border:1px solid red;
}
.grid {
display: grid;
grid-gap: 1px;
background: black;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
border:1px solid green;
}
.item {
background: white;
}
</style>
<div class="grid-container">
<div class="grid">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
The wrapper (red border) takes the available space, but the grid then fits properly, without the wrapper the grid would spread out like the wrapper but behave like it was inside the wrapper.
As i mentioned in a comment this is happening with razor components in Blazor Server Side project. Not sure if this is an exclusive problem to me, the project or technology.
P.S.
The wrapper does not need a CSS class or styling, it can be a simple tag.
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I successfully created the grid, with the CSS display:grid; property, like this:
1 2
3 4
5 6
But I'm struggling with creating the offset, like this:
http://share.activ.is/Yjy8xZ
Anyone?
Here is the code:
.grid-container {
display: grid;
grid-template-columns: auto auto;
padding: 10px;
}
.grid-item:nth-child(2n) {
border: 2px dashed red;
margin-top: 10px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've been looking around at flex examples and having a go myself. I don't think this is possible with flexbox, but I thought I'd check before giving up on it.
The layout can be seen here:
All three elements are in the same parent div and unforntunately I'm stuck with this HTML structure so my options are limited. Sorry about the vague title. I couldn't really articulate the layout in words.
Thanks.
Since some kind soul has seen fit to answer...here's my version...no extra HTML required.
Codepen Demo
.wrapper {
width: 50%;
margin: 25px auto;
height: 300px;
border: 1px solid grey;
justify-content: space-between;
align-content: space-between;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.box {
width: 49.5%;
background: #000;
}
.left {
flex: 0 0 100%;
/* equals height */
background: lightblue;
}
.right.top {
flex: 0 0 39%;
/* equals height */
}
.right.bottom {
flex: 0 0 39%;
/* equals height */
}
<div class="wrapper">
<div class="box left"></div>
<div class="box right top"></div>
<div class="box right bottom"></div>
</div>
As I'm trying to learn flex myself I thought I'd give this a go and came up with the following (otherwise this question should be closed for being too broad)
.container {display:flex;}
.column {flex:1;}
.row {flex:1; background-color:black;}
#outer {flex-direction:row; height:250px;} /* height for example purpose only */
#left {background-color:black; margin-right:20px;}
#right {flex-direction:column;}
#top {margin-bottom:50px;}
<div class="container" id="outer">
<div class="column" id="left"></div>
<div class="column container" id="right">
<div class="row" id="top"></div>
<div class="row" id="bottom"></div>
</div>
</div>