lapisnev

Don't squeeze me, I fart

Things that make you go 🤌. Weird computer stuff. Artist and general creative type. Occasionally funny. Gentoo on main. I play rhythm games!

Inkscape Monofur font Cohost PLUS!

You can post SVG files like photos on this website! Spread the word!


lexi
@lexi

"surely it isnt that hard to get layouts like this with those gaps, right?"

EDIT: "why does [x] not work?" this is why


xkeeper
@xkeeper
Sorry! This post has been deleted by its original author.

gwenverbsnouns
@gwenverbsnouns

it lets you basically use ascii art to draw out your table!

css:

.container {
  display: grid;
  grid-template-areas:
    'a c d d'
    'b c f g'
    'e e e g'
  ;
  grid-gap: 10px 10px;
}

.container > span {
  border: thin solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
}

html:

<div class="container">
  <span style="grid-area: a;">a</span>
  <span style="grid-area: b;">b</span>
  <span style="grid-area: c;">c</span>
  <span style="grid-area: d;">d</span>
  <span style="grid-area: e;">e</span>
  <span style="grid-area: f;">f</span>
  <span style="grid-area: g;">g</span>
</div>
a b c d e f g

IMO, way easier and cleaner than the old <table> approach, bc you can just glance at the template areas and see what the table is.


You must log in to comment.

in reply to @lexi's post:

gap usually works, but not in this case, because i want those tiles to be on a fixed grid, and the 1x1 aspect ratio to be 1:1 and the others to connect over the gap. using gap results in this:

the problem with that is that i have to use a fixed value for the width/height. id have to mess around with calc() to make it fill up all available space lol

in reply to @xkeeper's post:

also i agree 100% this would usually be better with table and i am a passionate grid hater as well, but in this case grid is easier because i change positions and dimensions on the fly. and having to generate the table every time is a lot easier than just doing grid-column: var(--col) / span var(--width); grid-row: var(--row) / span var(--height);

what @quat already said, plus grid is just a lot more flexible. you can stack entries on the grid, you can change orders on the fly, you can define your grid however you like even if it does not make sense. table on the other hand just does a table

in reply to @gwenverbsnouns's post:

thats pretty nice and works for a lot of use cases but i need those boxes to be square if they're 1x1 or match up with the others if they're larger, like in my first image. you'd have to pass the width/height and gap size to the spans and set the width/height to 10px * height + gap * (height - 1) which sucks

also if you're curious why i am not using grid templates: this layout will change on the fly, and just setting grid-row/grid-column is better in that case or id have to generate the grid template as a string every time which is definetly more work lol

I definitely have generated the template strings in JS before and it was easier x) I could be misunderstanding, but I don't think the gap interferes with making square things square?

p sure for dynamic sizing you just need

grid-template-rows: repeat(3, ${size}px);

grid-template-columns: repeat(4, ${size}px);

(plus dynamically making grid-template-areas if ur moving the boxes around)