I can’t seem to find a way to align them.
I was expecting for the divs to automatically align, but they didn’t.
Could somebody provide me with the code for them to align, stop at the end border of the page and automatically space apart? I was at least able to space the divs apart when they come right beside eachother.
.d-flex {
display: flex;
}
.gap-20 {
gap: 20px;
}
/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@property --border-angle-1 {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
@property --border-angle-2 {
syntax: "<angle>";
inherits: true;
initial-value: 90deg;
}
@property --border-angle-3 {
syntax: "<angle>";
inherits: true;
initial-value: 180deg;
}
/* sRGB color. */
:root {
--bright-blue: rgb(0, 100, 255);
--bright-green: rgb(0, 255, 0);
--bright-red: rgb(255, 0, 0);
--background: black;
--foreground: white;
--border-size: 2px;
--border-radius: 0.75em;
}
/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
:root {
--bright-blue: color(display-p3 0 0.2 1);
--bright-green: color(display-p3 0.4 1 0);
--bright-red: color(display-p3 1 0 0);
}
}
@keyframes rotateBackground {
to {
--border-angle-1: 360deg;
}
}
@keyframes rotateBackground2 {
to {
--border-angle-2: -270deg;
}
}
@keyframes rotateBackground3 {
to {
--border-angle-3: 540deg;
}
}
body {
background: var(--background);
color: var(--foreground);
min-height: 100dvh;
display: grid;
place-content: center;
margin: 0;
font-family: "Aspekta";
}
button {
--border-angle-1: 0deg;
--border-angle-2: 90deg;
--border-angle-3: 180deg;
color: inherit;
font-size: calc(0.8rem + 4vmin);
font-family: inherit;
border: 0;
padding: var(--border-size);
display: flex;
width: max-content;
border-radius: var(--border-radius);
background-color: transparent;
background-image: conic-gradient( from var(--border-angle-1) at 10% 15%, transparent, var(--bright-blue) 10%, transparent 30%, transparent), conic-gradient( from var(--border-angle-2) at 70% 60%, transparent, var(--bright-green) 10%, transparent 60%, transparent), conic-gradient( from var(--border-angle-3) at 50% 20%, transparent, var(--bright-red) 10%, transparent 50%, transparent);
animation: rotateBackground 3s linear infinite, rotateBackground2 8s linear infinite, rotateBackground3 13s linear infinite;
}
/* Change this background to transparent to see how the gradient works */
button div {
background: var(--background);
padding: 1em 1.5em;
border-radius: calc(var(--border-radius) - var(--border-size));
color: var(--foreground);
}
<!DOCTYPE html>
<html>
<head>
<title>techguyaj24's GameVerse!</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<div class="d-flex gap-20">
<div>
<a href="/doge-miner">
<button>
<div>
<img src="/img/doge-coin.png">
<center>Doge Miner</center>
</div>
</button>
</a>
</div>
<div>
<a href="/n-gon">
<button>
<div>
<img src="/img/ngon-bot.png">
<center>N-Gon</center>
</div>
</button>
</a>
<div class="d-flex gap-20">
<div>
<a href="/2048">
<button>
<div>
<img src="/img/2048.png">
<center>2048</center>
</div>
</button>
</a>
</div>
<div>
<a href="/chrome-dino">
<button>
<div>
<img src="/img/dino.png">
<center>Chrome Dino</center>
</div>
</button>
</a>
</div>
</div>
</div>
</body>
</html>
2
Answers
I made some changes to your HTML and CSS to align the cards. I removed some CSS and classes and added new code. However, I’m not sure if this is how you want the cards to be aligned. So, take this as an example, compare it with your code, and make changes according to your requirements.
In this code, you can clearly see that I have removed the
display: flex;
CSS styling and used CSS grid to accomplish this.Hope this make sense..!
I checked your code and updated some styles and layout of the elements.
CSS style
Layout
Result