Here is the first code that's all I wanted. but with the grid layout. this is float based layout
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #232323;
}
.square {
padding-bottom: 30%;
width: 30%;
background-color: #399099;
float: left;
margin: 1.66%;
}
.content {
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Heard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
<script src="index.pack.js"></script>
</body>
</html>
<script src="index.pack.js"></script>
</body>
</html>
This is the result all I wanted but with grid
Here is the Codepen link
I tried first this one
max-width: 650px;
margin: 0 auto;
padding: 4rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 10px;
}```
I got this I don't want the squares stack on top of each other on mobile view
then I tried this one
grid-template-columns: repeat(3, 1fr);
But this time I got this Why they so far from each other?
Can anyone please tell me how can I achieve the float-based layout with gird?
Working Code !!
I have removed width property of .square class and make the padding-bottom: 100%
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #232323;
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.square {
padding-bottom: 100%;
background-color: #399099;
float: left;
margin: 1.66%;
}
.content {
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Heard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
<script src="index.pack.js"></script>
</body>
</html>
<script src="index.pack.js"></script>
</body>
</html>
I saw that someone beat me to an answer but since I already made this ima leave it here incase you think this design is nicer.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #232323;
display: grid;
grid-template-columns: repeat(3, 1fr);
border:1px solid black;
}
.square {
background-color: #399099;
margin:0 auto;
padding:30%;
border:1px solid black;
width:100%;
}
.content {
clear: both;
}
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Heard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
I think the code speaks for itself. I tried using percentage as grid-gap and padding on .container but grid can't calculate height in that case according to this post.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
margin: 0.5rem auto;
background-color: #232323;
/* NEW CODE */
display: grid;
padding: 0.5rem;
padding-bottom: 0px; /* Honestly don't know why I needed this */
grid-gap: 0.5rem;
grid-template-columns: 1fr 1fr 1fr;
}
.square {
padding-top: 100%; /* ASPECT RATIO 1:1 */
background-color: #399099;
}
<div class="header">
<h1><span id="target">RGB</span> color game</h1>
</div>
<div id="manue">
<button id="reset">New Color</button>
<p id="massage"></p>
<div id="lavel">
<button id="easy">Easy</button>
<button id="heard">Hard</button>
</div>
</div>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="content"></div>
</div>
Related
I want to apply this style to my current code but the spaces dont fit the grid div they spill out under it:
.square {
width: 20%;
height: 20%;
border: 1px solid black;
box-sizing: border-box;
margin: 1%;
border-radius: 5px;
}
Here is my current HTML/CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
.grid {
display: flex;
flex-wrap: wrap;
width: 500px;
height: 500px;
margin: 0 50px;
}
.square {
width: 20%;
height: 20%;
border: 1px solid black;
box-sizing: border-box;
}
.selector {
width: 200px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 50px;
}
.bet-amount {
margin: 50px;
}
.button {
margin: 50px;
}
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="grid">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="selector">
<div class="amount">
<label for="amount-input">Amount:</label>
<input type="text" id="amount-input">
</div>
<div class="button">
<button>Play</button>
</div>
</div>
</div>
</body>
</html>
I also want to center the whole container vertically and horizontally in the center of the screen and convert the px to %.
I have tried editing the various heights and widths of the elements but can't seem to get it to work.
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
I have a layout that is a sidebar and a grid both wrapped in a flexbox. I'd like to put a div underneath the grid so it can have prev/next buttons, like in this image, but I can't figure out how to do that. The grid resizes itself with the window so the grid can take as many rows as necessary and then the div should go below that, and be as wide as the grid.
This is what I have, but the div is on the right of the grid:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1;
min-width: 250px;
}
.grid-container {
flex: 4;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
#flex-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
</style>
</head>
<body>
<div id="flex-container">
<aside class="sidebar">
</aside>
<section 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 class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
Checkout the following Code.
#main{
display :flex;
}
#sidebar{
width:70px;
height: 300px;
border: solid black 1px;
}
#grid-area{
width:200px;
height: 300px;
border: solid black 1px;
display: block;
}
#grid{
width:200px;
height: 250px;
border: solid black 1px;
display: block;
}
<div id="main">
<div id="sidebar"></div>
<div id="grid-area">
<div id="grid"></div>
<div id="button">next / prev</div>
</div>
</div>
You should use nested flex containers. Section and bottom div should be wrapped inside another flex container with flex direction to column.
So outer flex will make sidebar & inner flex container to be side by side.
Or just use a normal div container instead of flex.
here is another example only with grid keeping the pre/next button at the bottom of the viewport:
body {
margin: 0;
}
#grid-container {
display: grid;
height: 100vh;
grid-template-columns: minmax(250px, 1fr) 4fr;
grid-template-rows: 1fr auto;
}
aside {
background-color: red;
border: 1px solid;
margin: 0.25em;
grid-row: span 2;
grid-column: 1;
}
section,
#page-buttons {
grid-column: 2;
border: solid 1px;
margin: 0.25em;
}
section {
overflow: auto;
}
#page-buttons {
display: flex;
gap: 1em;
padding: 0.5em;
background: lightgray;
justify-content: center;
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
<div id="grid-container">
<aside class="sidebar">
</aside>
<section 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 class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
I have 4 divs that I need to arrange properly but they have the same class name. I want to have a result like this > https://imgur.com/Bx5zu1i that is not changing when window is resized. I tried flexbox and I can't get the result I wanted. Thanks for the help
Edit: sorry I'm new to stackoverflow, here's the code below
<head>
<style>
.box {
background-color: yellow;
display: table-cell;
padding: 20px;
background-clip: content-box;
width: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box1 <br><br><br><br><br><br><br><br></p>
</div>
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box2 <br><br><br><br><br><br><br><br></p>
</div>
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box3 <br><br><br><br><br><br><br><br></p>
</div>
<div class="box">
<h2 class="box-heading">heading</h2>
<p>box4 <br><br><br><br><br><br><br><br></p>
</div>
</div>
</body>
</html>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid #000;
padding: 0 15px;
}
.child {
margin: 15px auto 0 auto;
width: 31%;
height: 160px;
box-sizing: border-box;
border: 1px solid #000;
}
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
Now in your css
.myclass{
width: 31.33%;
padding: 1%;
}
.myclass:nth-child(4) {
margin: 0 auto.
}
OK, I edited my question and code to easily show what I mean. I need to have:
"menu" - positioned-left, min-height=500px, width=250px - at all times.
"content" - positioned on the right side of "menu", dynamic width to take all remaining space.
Same height for "menu" and "content" at all times. No matter there will be 1 box or 100 inside "content".
"Boxes" should be lined up from left to right and if there are more, they should stretch height of "content" and "menu" should follow the same height.
<div class="header" style="height:150px; background-color:black;" >
</div>
<div class="navbar" style="height:40px; background-color:yellow;" >
</div>
<div class="menu" style="min-height:500px; width:250px; background-color:orange; float:left;" >
</div>
<div class="content" style="height:auto; background-color:blue; float: left; " >
<?php for ($col = 0; $col < 50; $col++)
{
?><div class="box" style="width:80px; height:80px; background-color:white; margin:10px;" ></div><?php
}
?>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 1px solid black
}
body {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 150px 40px minmax(500px , 1fr)
}
.header, .navbar {
grid-column: 1 / -1
}
.content {
display: grid;
grid-gap: 20px;
padding: 20px;
grid-template-columns: repeat(auto-fill, 80px);
align-content: start;
justify-content: space-evenly;
}
.box {
width: 80px;
height: 80px;
}
<body>
<div class='header'>
Header
</div>
<div class='navbar'>
Navbar
</div>
<div class='menu'>
Menu
</div>
<div class='content'>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
</div>
</body>
Your goal is easier to achieve with flexbox, as shown in the solution below.
.header {
height: 150px;
background-color: black;
}
.navbar {
height: 40px;
background-color: yellow;
}
.container {
min-height: 500px;
display: flex;
align-items: flex-start;
}
.menu {
min-height: 500px;
height: 100%;
width: 250px;
background-color: orange;
}
.content {
min-height: 500px;
background-color: blue;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.box {
width: 80px;
height: 80px;
background-color: white;
margin: 10px;
}
<div class="header">
</div>
<div class="navbar">
</div>
<div class="container">
<div class="menu">
</div>
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>