How would this be done using Grid?
Also, is this possible to do?
Code: https://jsfiddle.net/ufrphzvL/
.grid {
display: grid;
margin: 5%;
grid-template-columns: auto auto auto;
background-color: black;
transform: rotate(45deg);
}
.circle {
width: 150px;
height: 150px;
background: transparent;
padding: 8px;
box-sizing: border-box;
position: relative;
}
.circle::before {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("https://via.placeholder.com/150");
transform: rotate(-45deg);
border-radius: 50%;
}
.item {
position: relative;
z-index: 2;
margin: auto;
transform: rotate(315deg);
}
<div class="grid circle">
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
<svg class="item" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" /></svg>
</div>
Utilizing Grid, Removing Transform entirely
if by this, you want to know if there is a way in grid to rotate elements than i dont think it does because grid and transform are entirely different things.
A grid is used to lay out elements on the webpage and the transform is used to manipulate an element by doing transformations on it such as rotating it or scaling it.
I think it is able to be achieved. Maybe someone on here might know how it is done, if it is able to be done.
Here’s an article if you wanna learn more about grid which goes in depth and explains most of its properties.
1 Like
How does this look to you?
Did I do this right?
Is there anything you would change?
Code: https://jsfiddle.net/g1epcdau/
.grid {
width: 150px;
height: 150px;
margin: 5%;
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"r1c1 r1c2 r1c3 r1c4 r1c5"
"r2c1 r2c2 r2c3 r2c4 r2c5"
"r3c1 r3c2 r3c3 r3c4 r3c5"
"r4c1 r4c2 r4c3 r4c4 r4c5"
"r5c1 r5c2 r5c3 r5c4 r5c5";
border-radius: 50%;
align-items: center;
box-sizing: border-box;
padding: 0;
background-image: url("https://via.placeholder.com/300");
background-size: cover;
background-repeat: no-repeat;
}
.i1 {
grid-area: r1c3;
}
.i2 {
grid-area: r2c2;
}
.i3 {
grid-area: r2c4;
}
.i4 {
grid-area: r3c1;
}
.i5 {
grid-area: r3c3;
}
.i6 {
grid-area: r3c5;
}
.i7 {
grid-area: r4c2;
}
.i8 {
grid-area: r4c4;
}
.i9 {
grid-area: r5c3;
}
.item {
margin: auto;
width: 18px;
}
<div class="grid circle">
<svg class="item i1" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i2" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i3" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i4" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i5" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i6" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i7" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i8" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
<svg class="item i9" width="20px" viewBox="0 0 36 36">
<path fill="#BDDDF4" d="M13 3H7l-7 9h10z" />
<path fill="#5DADEC" d="M36 12l-7-9h-6l3 9z" />
<path fill="#4289C1" d="M26 12h10L18 33z" />
<path fill="#8CCAF7" d="M10 12H0l18 21zm3-9l-3 9h16l-3-9z" />
<path fill="#5DADEC" d="M18 33l-8-21h16z" />
</svg>
</div>
Nice work!
BTW I don’t think you need the grid-template-columns and grid-template-rows if you set them all to auto and specify grid-template-areas.
@BenGitter I think your right, but it is a bit more explicit with the row/column declarations.
@javascriptcoding5678 If you do want row/column declarations I would suggest using the repeat function. You are also allowed to use . as an empty space and you can use white space to create the shape if that is easier to visualize than the row/column naming you have now.
grid-template-columns: repeat(5, auto);
grid-template-rows: repeat(5, auto);
grid-template-areas:
". . item1 . ."
". item2 . item3 ."
"item4 . item5 . item6"
". item7 . item8 ."
". . item9 . ."
;
1 Like
Replace this: https://jsfiddle.net/vyc2qmta/
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto;
grid-template-areas:
"r1c1 r1c2 r1c3 r1c4 r1c5"
"r2c1 r2c2 r2c3 r2c4 r2c5"
"r3c1 r3c2 r3c3 r3c4 r3c5"
"r4c1 r4c2 r4c3 r4c4 r4c5"
"r5c1 r5c2 r5c3 r5c4 r5c5";
With This: https://jsfiddle.net/s85thmqj/2/
grid-template-columns: repeat(5, auto);
grid-template-rows: repeat(5, auto);
grid-template-areas:
"r1c1 r1c2 r1c3 r1c4 r1c5"
"r2c1 r2c2 r2c3 r2c4 r2c5"
"r3c1 r3c2 r3c3 r3c4 r3c5"
"r4c1 r4c2 r4c3 r4c4 r4c5"
"r5c1 r5c2 r5c3 r5c4 r5c5";
or did I miss understand it?
How do you put this inside the CSS?
Can you show me a jsfiddle example with my code?
grid-template-areas:
". . item1 . ."
". item2 . item3 ."
"item4 . item5 . item6"
". item7 . item8 ."
". . item9 . ."
;
That is correct.
Whenever you see yourself repeating the same values for the row/column more than 2 or 3 times it’s usually best to just use the repeat function. It also lets you add or remove rows and columns much easier.
Something like this:
1 Like
system
December 30, 2021, 5:15am
10
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.