I am struggling with lining my P5.JS sliders into my CSS grid.
Unfortunately, I don't get this to showcase in the code snippet function. Therefore, I'll paste my code and show the result via an image.
Part of my HTML:
<body>
<div class="menu">
<h1>MENU</h1>
</div>
<div class="outer">
<div class="container">
<div class="temp">
</div>
<div class="draw">
<p id="canvas"></p>
</div>
<div class="label">
<label for="shapes">Shapes</label><br>
<label for="scale">Scale</label><br>
<label for="rotation">Rotation</label><br>
<label for="background">Background</label><br>
<label for="stroke">Stroke</label><br>
<label for="fill">Fill</label><br>
</div>
<div class="slider">
<p id="shape"> </p>
<p id="scale"> </p>
<p id="rotation"> </p>
<p id="background"> </p>
<p id="stroke"> </p>
<p id="fill"> </p>
<p id="position"> </p>
<p id="save"> </p>
<p id="record"> </p>
</div>
<div class="check">
<p id="checkshape"> </p>
<p id="checkscale"> </p>
<p id="checkbackground"> </p>
<p id="checkstroke"> </p>
<p id="checkfill"> </p>
<p id="checkposition"> </p>
<p id="checkpaint"> </p>
<p id="checkrecord"> </p>
</div>
</div>
</div>
</body>
</html>
Part of my CSS:
* {
margin: 0;
padding: 0;
}
.outer div {
outline: 1px solid red;
min-height: 20px;
}
body {
width: 100vw;
}
.menu {
width: 100%;
height: 60px;
}
.outer {
display: flex;
justify-content: center;
margin-top: 1vw;
}
.container {
width: 95%;
display: grid;
grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1vw;
}
.menu,
.container div {
border: 1px solid black;
box-sizing: border-box;
}
.temp {
grid-column: 1 / 2;
}
.draw {
grid-column: 2 / 3;
aspect-ratio: 1 / 1;
}
.label {
grid-column: 3 / 4;
text-align: right;
}
.slider {
grid-column: 4 / 5;
}
.check {
grid-column: 5 / 6;
}
Part of my P5.JS (only showcasing some sliders)
function setup(){
canvasForPosition = createCanvas(windowWidth, windowHeight);
canvasForPosition.parent('#canvas');
sliderSize = createSlider(10, height,height/2,0.00001);
sliderSize.parent('#scale');
checkScaleAuto = createCheckbox('Automate', false);
checkScaleAuto.parent('#checkscale');
}
Outcome:
This is how the lining should look. + I want to add additional labels on the left (The positioning here was made with p5.position):
I was wondering if I could somehow nest another grid into my columns 3/6 and if that is compatible with all browsers. Or maybe there is an option to match the hight of a checkbox with the text and sliders.
Appreciate your help.
Max
Given the structure of your HTML and the need to have things across the last 3 columns aligned the simplest thing seems to make each a one column, multi row grid. Divide each into say 31 rows of equal size.
You then can place each of the HTML elements exactly in the row you want it to be so that the labels/sliders/checks are aligned as required.
Remove the additional br elements and let the grid do the positioning.
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer div {
outline: 1px solid red;
min-height: 20px;
}
body {
width: 100vw;
}
.menu {
width: 100%;
height: 60px;
}
.outer {
display: flex;
justify-content: center;
margin-top: 1vw;
}
.container {
width: 95%;
display: grid;
grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1vw;
}
.menu,
.container div {
border: 1px solid black;
box-sizing: border-box;
}
.temp {
grid-column: 1 / 2;
}
.draw {
grid-column: 2 / 3;
aspect-ratio: 1 / 1;
}
.label,
.slider,
.check {
display: grid;
grid-template-rows: repeat(31, 1fr);
grid-template-columns: 1fr;
gap: 0.25vw;
}
.label {
grid-column: 3 / 4;
text-align: right;
}
.slider {
grid-column: 4 / 5;
}
.check {
grid-column: 5 / 6;
}
.label>*,
.slider>*,
.check>* {
background: lightblue;
}
</style>
</head>
<body>
<div class="menu">
<h1>MENU</h1>
</div>
<div class="outer">
<div class="container">
<div class="temp">
</div>
<div class="draw">
<p id="canvas"></p>
</div>
<div class="label">
<label for="shapes">Shapes</label>
<label for="scale">Scale</label>
<label for="rotation">Rotation</label>
<label for="background">Background</label>
<label for="stroke">Stroke</label>
<label for="fill">Fill</label>
</div>
<div class="slider">
<p id="shape"> </p>
<p id="scale"> </p>
<p id="rotation"> </p>
<p id="background"> </p>
<p id="stroke"> </p>
<p id="fill"> </p>
<p id="position"> </p>
<p id="save"> </p>
<p id="record"> </p>
</div>
<div class="check">
<p id="checkshape"> </p>
<p id="checkscale"> </p>
<p id="checkbackground"> </p>
<p id="checkstroke"> </p>
<p id="checkfill"> </p>
<p id="checkposition"> </p>
<p id="checkpaint"> </p>
<p id="checkrecord"> </p>
</div>
</div>
</div>
</body>
</html>
I haven't done any positioning of the labels etc here because I don't know where they are to be aligned to. The 31 rows is a suggestion so you have some to leave as blank space rather than worry about which groups need extra margins as the HTML is not structured that way.
Related
I have 20 element for a grid view. But I want only 3✕3 grid view, where there will be only 9 element in the view window. And the rest of the element should be placed in the right side of the window as a scrollable asset.**
No matter what the screen size is I want to show only the first 9 element in the grid.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
In this case the grid should flow vertically. And you can set it up like this with some calculation:
.cards {
/* how many columns on the first screen */
--cols: 3;
/* how many rows on the first screen */
--rows: 3;
/* grid gap */
--gap: 5px;
--width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
display: grid;
position: relative;
grid-auto-flow: column dense;
grid-template-rows: repeat(var(--rows), 1fr);
grid-auto-columns: var(--width);
grid-gap: var(--gap);
overflow-x: auto;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
<div class="card">THIRTEEN</div>
<div class="card">FOURTEEN</div>
</div>
.cards {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.card {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
</div>
A simple way to achieve this is by using nth-child CSS selector on your card class. Since, you want to display only he first 9 cards in the container, you will have to hide the cards from 10th position onwards.
Consider :nth-child(an + b). Here, the term b is the offset that you can specify to target cards. If you remove a and substitute the value of b as 10, it will target all the cards that appear as 10th child and later. The selector will be like so: :nth-child(n + 10). This is a comparatively readable solution.
Bonus Tip: To make sure the cards show up as 3 x 3 grid, you can explicitly update grid-template-columns CSS property to be repeat(3, 1fr) instead of repeat(auto-fill, minmax(150px, 1fr))
This is the final snippet:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
/* Hide card which occurs at 10th position and above */
.card:nth-child(n + 10) {
display: none;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
I use this tool and it makes everything easier : https://cssgrid-generator.netlify.app/
You just select wich grid you want, how many rows... and it gives you the css + html :)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
So I've been trying to make a grid for the past 30 minutes and I can't seem to get it to work. I've tried the piece of code on a sandbox and it worked there. I don't understand why it wont work on my page. What happens is all the divs get placed under each other and I want them to be next to each other instead.
What happens:
div1
div2
div3
What I want to happen:
div1 div2 div3
<div class="jar-lists-wrapper slide-in">
#foreach($folders as $folder)
<div class="jar-lists hidden" data-name="{{$folder}}">
<div class="jar-list box" data-name="{{$folder}}">
<div class="box-header with-border">
<h1 class="box-title">{{$folder}}</h1>
</div>
<div class="box-body">
<div class="jar-children">
#foreach($jars as $jar)
#if(strpos($jar, strtolower($folder)) !== false)
<div>
<h3 class="jar-title">Version:
{{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}
</h3>
<form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">
#if(str_replace('.jar', '', $jar) == $currentJar)
<br><button class="btn btn-success" type="submit">Installed</button>
#else
<br><button class="btn btn-primary" type="submit">Install</button>
#endif
</form>
<br>
</div>
#endif
#endforeach
</div>
</div>
<div class="box-footer">
View More<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
#endforeach
</div>
And this is my css:
.main {
width: 90%;
max-width: 1300px;
margin: 0 auto;
padding: 2em
}
.jar-lists-wrapper {
position: relative;
display: block
}
.jar-lists {
position: relative;
margin-bottom: 60px;
margin-top: 30px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 32.5%);
justify-content: space-between;
z-index: 1
}
.jar-lists.hidden {
display: none
}
.jar-list {
text-align: center;
}
.jar-title {
font-size: 16px;
color: #5e5e5e
}
.jars-more {
display: block;
width: 100%;
text-decoration: none;
text-align: center
}
.jars-more {
padding: 10px 0;
font-size: 18px;
color: gray;
cursor: pointer
}
.jars-more i {
margin-left: 10px
}
#media screen and (max-width:1250px) {
.jar-lists {
grid-template-columns: repeat(2, 47%)
}
.jar-list {
margin-bottom: 30px
}
}
#media screen and (max-width:900px) {
.jar-lists {
grid-template-columns: repeat(1, 100%)
}
}
div are block level element so they appears horizontally. So use display:inline-block and width
.child {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use flex
.parent {
display: flex;
flex-direction: row;
}
.child {
border: 2px solid green;
width: 150px;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use grid
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.child {
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div
Try specifying gird-template-spacing from 32.5% to 1fr.
I am looking for a way to allow two rows within a single column while the other two columns to the right of it are equal/flexible to the height of those two rows. The width should be 100% when looking at all three columns (so around 33% each column). Here is an example of how I want it to look:
https://i.imgur.com/lLPzXhS.png
I will be filling those boxes with clickable boxes like shown below:
https://i.imgur.com/uyyDbL7.png
I have tried using display: row, display: cell, but I am not able to add any margins to it so this is the product I get:
https://i.imgur.com/Ok6EgT0.png
You can see that I have somewhat of the grid system set up, but not as ideally as I want it. There are no margins that can be set between the red and orange box, even though I am able to add margins to the turqoise and blue box.
Here is the code I have:
HTML:
<div class='d-table'>
<div class='t-row'>
<div class='t-cell one-third'>
<div class='turqoisebox'>
Turqoise box here
</div>
<div class='bluebox'>
Blue box here
</div>
</div>
<div class='t-cell one-third redbox'>
Red box here
</div>
<div class='t-cell one-third orangebox'>
Orange box here
</div>
</div>
</div>
CSS:
.d-table {
display: table;
}
.t-row {
display: table-row;
}
.t-cell {
display: table-cell;
margin-left: unset;
margin-right: unset;
/*border: 1px solid tomato;*/
}
.one-third {
width: 30%;
}
.two-thirds {
width: 200px;
}
.bluebox {
background-color: #9dd8dd;
margin: 25px;
border-radius: 25px;
border: solid #7dacb0;
border-width: 3px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.4);
transition: 0.3s;
text-align: center;
}
.bluebox:hover {
box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.8);
}
Any thoughts on how to replicate the second image results neatly?
You could use flexbox. Take a look at this simplified example:
.content {
background: orange;
margin: 1rem;
padding: 1rem;
flex: 1;
color: white;
display: flex;
}
.content > span {
margin: auto;
}
.row {
display: flex;
flex-direction: row;
background-color: blue;
flex: 1
}
.col {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
<div class="row">
<div class="col">
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
<div class="row">
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
<div class="col">
<div class="content">
<span>This is centered</span>
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
</div>
<div class="col">
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
This is not
</div>
<div class="content">
<span>This is centered</span>
</div>
</div>
</div>
You could also use a minimal flexbox-based grid library like Flexbox Grid.
Margin is used for setting where elements should start so instead use padding between those 2 elements to get the space you want.
I want the buttons to be positioned above the box, but i don´t know how to do it, i tried many thigs but didn´t work
Something like this, idk how to put those button above
This is my HTML Code
<div id="clockdiv">
<div id="time">
<span class="minutes"></span>
:
<span class="seconds"></span>
</div>
</div>
<div>
<div>
<img src="imgs/stop.png" class="btnStop" id="btnStop"/>
</div>
<div>
<img src="imgs/play.png" class="btnPlay" type="button" id="btnPlay"/>
</div>
<div>
<img src="imgs/pause.png" class="btnPause" type="button" id="btnPause"/>
</div>
<div>
<img src="imgs/play.png" class="btnResume" type="button" id="btnResume"/>
</div>
</div>
</body>
</html>
This is my CSS
.btnStop {
width: 30%;
height: 30%;
display: none;
}
.btnResume {
width: 30%;
height: 30%;
}
.btnPlay {
width: 30%;
height: 30%;
}
.btnPause {
width: 30%;
height: 30%;
display: none;
}
Idk what to try, because im so useless with CSS
This is a perfect use-case for css grids
With the little info you have provided I can only help you so much but I am sure you can customize my solution for your needs
#container {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, max-content);
align-items: center;
align-content: center;
justify-content: center;
}
#container > button {
width: 30px;
height: 30px;
}
#timer {
grid-column: 1 / span 4;
grid-row: 2;
text-align: center;
font-size: 30px;
}
<div id="container">
<button class="btnPlay">▶️</button>
<button class="btnPause">⏸️</button>
<button class="btnStop">⏹️</button>
<button class="btnResume">⏯️</button>
<div id="timer">30:00</div>
</div>
I know there is a library called match-height.js that already does this for you but I'm trying to do it from scratch. I have row with 2 columns, the first one has a centered (horizontally and vertically) black square. The second column has a heading and a paragraph. I just want to match the heights of the columns with the class "about-wrapper".
HTML:
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
jQuery:
$(document).ready(function(){
$("#about-logo-wrapper").height = $("#about-text-wrapper").height;
});
You're using height() wrong. It's a function, not a property, and it takes a parameter when you want to use it to set height...
$(document).ready(function(){
$("#about-logo-wrapper").height($("#about-text-wrapper").height());
});
See the documentation for more info...
http://api.jquery.com/height/
I think you need first to check which height is greater: either left cell or right one:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ?
$("#about-text-wrapper").height() :
$("#about-logo-wrapper").height();
then set this height to about-wrapper
$(".about-wrapper").height(h);
Look at snippet in full page mode:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ? $("#about-text-wrapper").height() : $("#about-logo-wrapper").height();
$(".about-wrapper").height(h);
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
#about-text-wrapper {
border: 3px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS: