Kevin Powell - Community•2y ago

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•2y ago

check out Clippy, that is a good / free online tool for that

Joao•2y 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•2y ago

how many cols and rows do you want? How big it that top left gap (1 cell) ?

MarkBoots•2y ago

you could do something like this (without the grid-areas) https://codepen.io/MarkBoots/pen/QWrVyrJ

Gaming

Programming

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