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.
Related
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>
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.
}
I'm trying to create a 'grid' of squares using CSS. So far I've tried:
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
However, this simply display 6 squares in a row. I'd like to have two rows of 3 squares each, however. Why do the encompassing divs not have the 'normal' behavior that they are displayed beneath each other?
you have to clear your floatting elements
https://css-tricks.com/all-about-floats/
Clearing the Float
Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float....
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
body>div {overflow:hidden;}
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
It's because of float: left.
Option 1:
Use display:inline-block instead of float:left:
.square {
display: inline-block;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
Option 2
Use clearfix in parent div:
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
.parent{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="parent">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
Something like this?
<!DOCTYPE html>
<html>
<head>
<style>
.square-wrapper {
width: 276px;
}
.square {
display: inline-block;
float: left;
border: 1px solid black;
width: 30px;
height: 50px;
margin: 30px;
}
</style>
</head>
<body>
<div class="square-wrapper">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div class="square-wrapper">
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
</div>
</body>
</html>
You can place the blocks inside of a containing div that has a fixed width. This will force the blocks to stack given their display type. For example, placing the width of the container to 400px makes enough space for only three blocks in a row. Frameworks use a system that is very useful for creating grids that are evenly dispersed throughout the container.
<!DOCTYPE html>
<html>
<head>
<style>
.square {
display: block;
float: left;
border: 1px solid black;
width: 50px;
height: 50px;
margin: 30px;
}
.container {
width:400px;
}
</style>
</head>
<body>
<!-- Place all of your blocks in a single container -->
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<!-- The container is not large enough to display all of the blocks in one row -->
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
Created a codepen at http://codepen.io/cbireddy/pen/vmYxbz
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
}
<div class="=board">
<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>
I was thinking the squares should be in a 2x3 matrix. Instead they are all stacked vertically. What am I missing? Thought that display: flex will align the items along main axis, which is horizontal.
Can someone please look into this and tell me what am I doing wrong? Goal is to visualize the squares in a 2x3 matrix.
-Thanks
Chakri
You need to fix the typo and add box-sizing: border-box to .square so that the borders don't push beyond the defined width.
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
box-sizing: border-box;
}
<div class="board">
<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>
In row 24 of your HTML (in Codepen), you have typo. Just change <div class="=board">to <div class="board">
<div class="=board">
Replace this with
<div class="board">
Should do the trick.
Try This code
.board {
display: flex;
width: 600px;
height: 400px;
justify-content: flex-start;
flex-flow: row wrap;
}
.square {
width: 200px;
height: 200px;
border: 5px solid black;
border-radius: 10px;
}
<div class="board">
<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>
I'm trying to center container of divs (gray boxes) so that A=B. This equality should be preserved during resizing of the browser windows. Also, when the window is smaller then the width of current number of divs in a row, div arrangement should change to less number of columns.
I was trying to find some code, but no luck. Hope that someone could help.
And this is the code I have for now
HTML:
<div id="Area">
<div id="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="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
CSS:
#Area {
padding: 30px 50px; /* top and bottom 25px, left and right 50px */
}
#container{
width: 90%;
margin: 0 auto;
}
.square {
display: inline-block;
margin: 7 auto;
width: 350px;
height: 200px;
background-color: gray;
border: 1px black solid;
}
UPDATE.
After Shai's help, I've come up to a new problem. Divs are now stacked liked this:
But I would like to have them like this:
Add text-align: center; to the #container.
Working JSFiddle
A quick fix without changing your markup and styles would be to give your #area the position:relative; and width:100% attributes as well as changing the width:90% to a full width:100% of your #container
#Area {
padding: 30px 50px; /* top and bottom 25px, left and right 50px */
width: 100%;
position: relative;
}
#container{
width: 100%;
margin: 0 auto;
}
http://jsfiddle.net/8a0035ep/
Another solution(which i prefer most) is to remove dsiplay: inline-block(so keep default block) and use margin: 0 auto. Also add margin-bottom at x px according to your needs.
#Area {
padding: 30px 50px;
/* top and bottom 25px, left and right 50px */
}
#container {
width: 90%;
margin: 0 auto;
}
.square {
margin: 7 auto;
width: 350px;
height: 200px;
background-color: gray;
border: 1px black solid;
margin: 0 auto;
margin-bottom: 5px;
}
<div id="Area">
<div id="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="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
Could your heard about media query. I use the attribute to achieve your purpose.
This is my JSFiddle. The main code:
#media screen and (min-width:352px){
#container{
text-align: center;
}
}