I've got some problems when I'am trying to make my section with Grid layout. Where exactly I make mistake? Can someone explaine me, please?
HTML
<body>
<header>
<div class="grid-wrapper">
<div class="item1"><span>Item 1</span></div>
<div class="item2"><span>Item 2</span></div>
<div class="item3"><span>Item 3</span></div>
<div class="item4"><span>Item 4</span></div>
<div class="item5"><span>Item 5</span></div>
</div>
</header>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #969d9f;
}
header {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #969d9f;
}
.grid-wrapper {
border: 1px solid red;
width: 1200px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
.item1, .item2, .item3, .item4, .item5 {
border: 1px solid grey;
background-color: #636564;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 40px;
}
.item1 { width: 750px; }
.item2 { width: 360px; }
.item3 { width: 555px; }
.item4 { width: 555px; }
.item5 { width: 1200px; }
So the main question is how can I correctly display my blocks and where is my main mistake that I make?
Here is some pics:
Thank you for your attention!
its my opinion
HTML
<body>
<header>
<div class="grid-wrapper">
<div class="item1"><span>Item 1</span></div>
<div class="item2"><span>Item 2</span></div>
<div class="item3"><span>Item 3</span></div>
<div class="item4"><span>Item 4</span></div>
<div class="item5"><span>Item 5</span></div>
</div>
</header>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #969d9f;
}
header {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #969d9f;
}
.grid-wrapper {
border: 1px solid red;
width: 1200px;
display: grid;
grid-gap: 20px;
grid-template-areas: "item1 item1 item2" /* make grid area */
"item3 item4 item4"
"item5 item5 item5";
grid-template-columns:(1fr, 1fr, 1fr); /* set width of colums */
}
.item1, .item2, .item3, .item4, .item5 {
border: 1px solid grey;
background-color: #636564;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 40px;
}
.item1 {grid-area: item1} /* connect items with grid area */
.item2 {grid-area: item2}
.item3 {grid-area: item3}
.item4 {grid-area: item4}
.item5 {grid-area: item5}
Your layout isn't a "normal" grid (your rows 1 & 2 have cells with different widths from each other), so to resolve it, a solution could be to create more columns (3/4/5 columns: it depends by cells width and if the biggests [1&4] are equals or not) and play, for example, with grid-template-areas to create items that can... "fill more than 1 cell": in background there is a grid, but with this "trick" you can transform it as your layout.
This is a useful guide for more informations about CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Another solution is to use flexbox also for those rows :-)
Try it:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #969d9f;
}
header {
width: 100%;
/*height: 100vh;*/
display: flex;
justify-content: center;
background-color: #969d9f;
}
.grid-wrapper {
border: 1px solid red;
width: 100%;
max-width:1200px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"item1 item1 item1 item2"
"item3 item4 item4 item4"
"item5 item5 item5 item5";
}
.item1, .item2, .item3, .item4, .item5 {
border: 1px solid grey;
background-color: #636564;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 40px;
}
/*.item1 { width: 750px; }
.item2 { width: 360px; }
.item3 { width: 555px; }
.item4 { width: 555px; }
.item5 { width: 1200px; }*/
.item1 {
grid-area: item1;
}
.item2 {
grid-area: item2;
}
.item3 {
grid-area: item3;
}
.item4 {
grid-area: item4;
}
.item5 {
grid-area: item5;
}
<header>
<div class="grid-wrapper">
<div class="item1"><span>Item 1</span></div>
<div class="item2"><span>Item 2</span></div>
<div class="item3"><span>Item 3</span></div>
<div class="item4"><span>Item 4</span></div>
<div class="item5"><span>Item 5</span></div>
</div>
</header>
P.S. Maybe it is better don't use a fixed widths in a world of mobile device, so I changed your witdh:1200px with a max-width:1200px, but well you can change it
if you do not care about it ;-)
Related
Below image has been created by the graphics editor. The target is get the same view by CSS grid.
Currently, the middle row fills the viewport's width:
html, body {
height: 100%;
}
.TwoColumnsLayout {
display: grid;
grid-template-areas:
"UPPER_FIXED_CONTENT UPPER_FIXED_CONTENT"
"SIDEBAR SPECIFIC_CONTENT"
"BOTTOM_FIXED_CONTENT BOTTOM_FIXED_CONTENT";
grid-template-columns: 100px 1fr;
grid-template-rows: auto 1fr auto;
height: 100%;
}
.TwoColumnsLayout-UpperFixedContent {
height: 30px;
grid-area: UPPER_FIXED_CONTENT;
background-color: lightpink;
}
.TwoColumnsLayout-Sidebar {
overflow-y: auto;
grid-area: SIDEBAR;
background-color: gold;
width: 100px;
}
.TwoColumnsLayout-SpecificContent {
overflow-y: auto;
grid-area: SPECIFIC_CONTENT;
background-color: aquamarine;
}
.TwoColumnsLayout-BottomFixedContent {
height: 30px;
grid-area: BOTTOM_FIXED_CONTENT;
background: deepskyblue;
}
<div class="TwoColumnsLayout">
<div class="TwoColumnsLayout-UpperFixedContent"></div>
<div class="TwoColumnsLayout-Sidebar"></div>
<main class="TwoColumnsLayout-SpecificContent"></main>
<div class="TwoColumnsLayout-BottomFixedContent"></div>
</div>
In this case, justify-content: center; will change nothing.
If to apply justify-items: center; to grid container and also justify-self: stretch; to first and last element, we'll get:
html, body {
height: 100%;
}
.TwoColumnsLayout {
display: grid;
grid-template-areas:
"UPPER_FIXED_CONTENT UPPER_FIXED_CONTENT"
"SIDEBAR SPECIFIC_CONTENT"
"BOTTOM_FIXED_CONTENT BOTTOM_FIXED_CONTENT";
grid-template-columns: 100px 1fr;
grid-template-rows: auto 1fr auto;
justify-items: center;
height: 100%;
}
.TwoColumnsLayout-UpperFixedContent {
height: 30px;
grid-area: UPPER_FIXED_CONTENT;
background-color: lightpink;
justify-self: stretch;
}
.TwoColumnsLayout-Sidebar {
overflow-y: auto;
grid-area: SIDEBAR;
background-color: gold;
width: 100px;
}
.TwoColumnsLayout-SpecificContent {
overflow-y: auto;
grid-area: SPECIFIC_CONTENT;
background-color: aquamarine;
}
.TwoColumnsLayout-BottomFixedContent {
height: 30px;
grid-area: BOTTOM_FIXED_CONTENT;
background: deepskyblue;
justify-self: stretch;
}
<div class="TwoColumnsLayout">
<div class="TwoColumnsLayout-UpperFixedContent"></div>
<div class="TwoColumnsLayout-Sidebar"></div>
<main class="TwoColumnsLayout-SpecificContent"></main>
<div class="TwoColumnsLayout-BottomFixedContent"></div>
</div>
I expected it will be simple with CSS grid...
It there the solutions without adding of extra HTML elements?
You can do it like below. The 600px will simulate the max-width which is the area for the sidebar and content
body {
margin:0;
}
.TwoColumnsLayout {
--max: 600px; /* your max-width */
min-height: 100vh;
display: grid;
grid-template-columns:
calc((100% - var(--max))/2) 100px 1fr calc((100% - var(--max))/2);
grid-template-rows: auto 1fr auto;
}
.TwoColumnsLayout-UpperFixedContent,
.TwoColumnsLayout-BottomFixedContent{
height: 30px;
grid-column:1/-1;
background-color: lightpink;
}
.TwoColumnsLayout-Sidebar {
overflow-y: auto;
grid-column: 2;
background-color: gold;
}
.TwoColumnsLayout-SpecificContent {
overflow-y: auto;
background-color: aquamarine;
}
.TwoColumnsLayout-BottomFixedContent {
background: deepskyblue;
}
<div class="TwoColumnsLayout">
<div class="TwoColumnsLayout-UpperFixedContent"></div>
<div class="TwoColumnsLayout-Sidebar"></div>
<main class="TwoColumnsLayout-SpecificContent"></main>
<div class="TwoColumnsLayout-BottomFixedContent"></div>
</div>
I'm trying to represent this structure horizontaly, but I'm having some issues on what should I change so that this can work properly. What I hope to achieve is that those small squares in the bottom appear the same, only verticaly, on top of each other, while the bigger square keeps it's model.
.date-grid {
width: 120px;
height: 100px;
display: flex;
flex-direction: column;
}
.node {
width: 100%;
height: 100%;
background: #e9ecef;
border: none;
padding: 0;
}
time {
display: block;
height: 75%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 25%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.next { background: #0060df; }
.last { background: #d53343; }
<div class="date-grid">
<button class="node">
<time>3</time>
<div class="smallHolder">
<div class="next"></div>
<div class="last"></div>
</div>
</button>
</div>
Is this the sort of thing you're looking for? grid is great for this sort of thing.
.date-grid {
height: 100px;
display: grid;
grid-template-columns: 120px 25px;
grid-template-rows: 1fr 1fr;
grid-template-areas: "gray next" "gray last";
padding: 0;
border-style: none;
}
.gray {
grid-area: gray;
display: grid;
place-content: center;
background: #e9ecef;
}
time {
font-size: 24px;
}
.next {
grid-area: next;
background: #0060df;
}
.last {
grid-area: last;
background: #d53343;
}
<button class="node date-grid">
<time class='gray'>3</time>
<div class="next"></div>
<div class="last"></div>
</button>
I always struggle with flexboxes. This time is no exception trying to solve this for a solid hour and read a lot of similar questions but none of these gave me the right idea on how to do it with my layout. I hope that some of you could help me out with how to do this :)
I'm creating a MiniPlayer. The desired look of it is like that:
At the moment it looks like this:
This is my current css file:
.MiniPlayer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
display: flex;
flex-direction: row;
img{
width: auto;
height: 90%;
max-height: 100px;
max-width: 100px;
flex-direction: column;
}
.Title{
flex-direction: column;
flex-wrap: wrap;
}
.Name{
flex-direction: column;
flex-wrap: wrap;
}
.MediaButton{
flex-direction: row;
}
.Slider{
flex-direction: column;
flex-wrap: wrap;
flex-grow: 4;
}
Figured I would add a flexbox solution as initially requested.
* {
text-align: center;
}
.img,
.title,
.name,
.btn,
.slider {
border: solid black 2px;
}
.wrapper {
border: solid 1px orange;
padding: 1em;
display: flex;
}
.wrapper-2 {
margin-left: 1em;
width: 75%;
display: flex;
flex-direction: column;
}
.img {
width: 25%;
}
.title,
.name {
width: 50%;
margin-bottom: 1em;
}
.btn {
width: 25%;
margin-bottom: 1em;
}
.space-between {
display: flex;
justify-content: space-between;
}
<div class="wrapper">
<div class="img">img</div>
<div class="wrapper-2">
<div class="title">title</div>
<div class="space-between">
<div class="name">name</div>
<div class="btn">btn</div>
</div>
<div class="slider">slider</div>
</div>
</div>
Would highly recommend doing this in grid. It is possible by making a lot of clumsy new containers, but you have much better layout control with grid.
If you're not too comfortable with grid, you can use a CSS Grid Generator to do the work for you - works just fine.
.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 5px;
}
.parent div {
border: 1px solid black;
}
.div1 {
grid-area: 1 / 1 / 5 / 3;
}
.div2 {
grid-area: 4 / 3 / 5 / 7;
}
.div3 {
grid-area: 3 / 6 / 4 / 7;
}
.div4 {
grid-area: 1 / 3 / 2 / 6;
}
.div5 {
grid-area: 2 / 3 / 3 / 6;
}
<div class="parent">
<div class="div1">img</div>
<div class="div2">slider</div>
<div class="div3">pause</div>
<div class="div4">title</div>
<div class="div5">name</div>
</div>
I want to make a row-column-row layout using css flexbox, here's the code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 0.2%;
}
.box {
color: white;
background: royalblue;
min-height: 100px;
min-width: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
}
.b1 {
flex: 1 0 80%;
}
.b2 {
flex: 1 1 auto;
}
.b3 {
flex: 1 0 100%;
}
<div class="container">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
</div>
This is what I want:
And on mobile I want something like this:
But as you can see in the code, the column is not growing vertically and I cannot even use margins or gaps in between the divs.
Any suggestions will be appreciated. CSS-Grid solutions are also welcome.
A grid-based approach using a media query:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: 4fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"b1 b2"
"b3 b2";
gap: 0.2%;
}
#media screen and (max-width: 480px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"b1"
"b2"
"b3";
}
}
.box {
color: white;
background: royalblue;
min-height: 100px;
min-width: 100px;
border: 1px solid;
}
.b1 {
grid-area: b1;
}
.b2 {
grid-area: b2;
}
.b3 {
grid-area: b3;
}
<div class="container">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
</div>
I would like to fix both the header and the sidebars positioned with css-grids. I tried to use position:fixed but it ends up messing up the interface. Is there a simple way to do this? Or is the only way relative positioning and height/width adjustments? I wouldn't want to make the use of css-grids pointless...
Here's the link to the Codepen if you find it easier (code without lipsum included below): https://codepen.io/fergos2/pen/MWgLqgL?editors=1100
Thanks in advance for helping this newbie!
<div class="container">
<header class="header pd">Header</header>
<div class="left-sidebar pd">
<div class="box-1 pd">
Box-1
</div>
<footer class="footer pd">
Footer
</footer>
</div>
<div class="main-content pd">
Main content
</div>
<div class="right-sidebar pd">
<div class="box-2 pd">
Box-2
</div>
<div class="box-3 pd">
Box-3
</div>
</div>
</div>
.container {
width: 1000px;
margin: 30px auto;
background-color: #eee;
display: grid;
grid-template-rows: min-content 1fr;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 15px;
grid-template-areas: "head head head"
"leftbar main rightbar";
& > * {
background-color: pink;
color: #ggg;
font-size: 20px;
font-family: sans-serif;
}
}
.pd {
padding: 15px;
}
.header {
grid-area: head;
}
.left-sidebar {
grid-area: leftbar;
display: flex;
flex-direction: column;
justify-content: flex-start;
.box-1 {
color: red;
border: 1px solid purple;
margin-bottom: 5px;
}
.footer {
color: green;
border: 1px solid purple;
}
}
.main-content {
grid-area: main;
}
.right-sidebar {
grid-area: rightbar;
display: flex;
flex-direction: column;
justify-content: flex-start;
.box-2 {
color: red;
border: 1px solid purple;
margin-bottom: 5px;
}
.box-3 {
color: green;
border: 1px solid purple;
}
}
UPDATE:
position: -webkit-sticky;
position: sticky;
top: 0;
seems to work for the header but not for the sidebars (even when setting top:200px for example). Any suggestions on what to do with the sidebars?