How do I make shapes in css? (Like the img attached)

I want to have a css grid container which has a shape like this, how do I achieve something like this? Thanks in advance.
4 Replies
ghostmonkey
ghostmonkey3y ago
check out Clippy, that is a good / free online tool for that
Joao
Joao3y ago
You can use grid-template property, which allows you to enter empty spaces:
.grid {
display: grid;
grid-template:
". . header header" auto
"row1 row1 row1 col1 " auto
"row2 row2 row2 col1 " auto \
auto auto auto auto;
}
.grid {
display: grid;
grid-template:
". . header header" auto
"row1 row1 row1 col1 " auto
"row2 row2 row2 col1 " auto \
auto auto auto auto;
}
Then, inside each element within that you can apply grid areas and place content however you like. For example here you can have two rows with a side bar. Replace the "auto" by some amount of space if you'd like that particular row/col to be of a given size; you can use things like 1fr or 2fr if you want to as well.
MarkBoots
MarkBoots3y ago
how many cols and rows do you want? How big it that top left gap (1 cell) ?
MarkBoots
MarkBoots3y ago
you could do something like this (without the grid-areas) https://codepen.io/MarkBoots/pen/QWrVyrJ
Want results from more Discord servers?
Add your server