Virtual Coffee
CSS Battle #2 – Carrom #862
meg-gutshall
started this conversation in
CSS Battles
Replies: 3 comments
-
Using flexbox – 626.2 {286}<div></div>
<div></div>
<div></div>
<div></div>
<style>
body {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px 200px;
background: #62374e;
}
div {
width: 50px;
height: 50px;
background: #fdc57b;
}
</style>Using grid – 631.1 {268}<div></div><div></div><div></div><div></div>
<style>
body {
background: #62374e;
display: grid;
margin: 50px;
grid-template: 1fr 1fr / 1fr 1fr;
gap: 100px 200px;
}
div {
width: 50px;
height: 50px;
background: #fdc57b;
}
</style>Using
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Beta Was this translation helpful? Give feedback.
0 replies
-
Code Source – 639.84{242}<div><p a><p b></div><div><p c><p d></div>
<style>
* {position:fixed}
body {background:#62374E}
p {height:50;width:50;background:#fdc57b}
[a] {top:34;left:50}
[b] {bottom:34;left:50}
[c] {bottom:34;right:50}
[d] {top:34;right:50}
</style> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Link to battle:
Let's battle! ⚔️
Copy the code block below to format your comment on the discussion thread:
What others will see:
This will result in a nice hidden bit like so:
Code Source – score {character count}
Beta Was this translation helpful? Give feedback.
All reactions