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
check out Clippy, that is a good / free online tool for that
You can use
grid-template
property, which allows you to enter empty spaces:
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.how many cols and rows do you want? How big it that top left gap (1 cell) ?
you could do something like this (without the grid-areas)
https://codepen.io/MarkBoots/pen/QWrVyrJ