#Tag · bonfire.cafe

Roni Rolle Laukkarinen boosted

@anatudor@mastodon.social · 2 days ago

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

HTML:

```

<section>
<h2>Classic</h2>
<img src='classic-bar.png' alt=''/>
<h2>Flavour</h2>
</section>


<section>
<h2>
<span>Classic</span>
<span>Flavour</span>
</h2>
<img src='classic-bar.png' alt='the classic chocolate bar'/>
</section>
```

CSS:

```
section, h2 { display: grid }

section { grid-template-rows: repeat(3, auto) }

h2 {
grid-area: 1/ 1/ span 3;
grid-template-rows: subgrid;

span:last-child { grid-row: 3 }
}

img { grid-area: 2/ 1 }
``` — HTML: ```  <section> <h2>Classic</h2> <img src='classic-bar.png' alt=''/> <h2>Flavour</h2> </section>  <section> <h2> <span>Classic</span> <span>Flavour</span> </h2> <img src='classic-bar.png' alt='the classic chocolate bar'/> </section> ``` CSS: ``` section, h2 { display: grid } section { grid-template-rows: repeat(3, auto) } h2 { grid-area: 1/ 1/ span 3; grid-template-rows: subgrid; span:last-child { grid-row: 3 } } img { grid-area: 2/ 1 } ```

@anatudor@mastodon.social · 2 days ago

I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.

This is what subgrid was made for!

#CSS #layout #cssLayout #code #coding #web #dev #webDev #webDevelopment

HTML:

```

<section>
<h2>Classic</h2>
<img src='classic-bar.png' alt=''/>
<h2>Flavour</h2>
</section>


<section>
<h2>
<span>Classic</span>
<span>Flavour</span>
</h2>
<img src='classic-bar.png' alt='the classic chocolate bar'/>
</section>
```

CSS:

```
section, h2 { display: grid }

section { grid-template-rows: repeat(3, auto) }

h2 {
grid-area: 1/ 1/ span 3;
grid-template-rows: subgrid;

span:last-child { grid-row: 3 }
}

img { grid-area: 2/ 1 }
``` — HTML: ```  <section> <h2>Classic</h2> <img src='classic-bar.png' alt=''/> <h2>Flavour</h2> </section>  <section> <h2> <span>Classic</span> <span>Flavour</span> </h2> <img src='classic-bar.png' alt='the classic chocolate bar'/> </section> ``` CSS: ``` section, h2 { display: grid } section { grid-template-rows: repeat(3, auto) } h2 { grid-area: 1/ 1/ span 3; grid-template-rows: subgrid; span:last-child { grid-row: 3 } } img { grid-area: 2/ 1 } ```

Jen Simmons boosted

@frontenddogma@mas.to · 3 months ago

Item Flow: Next Steps for Masonry, by @jensimmons and @saron.bsky.social ( @webkit):

https://webkit.org/blog/17219/item-flow-part-2-next-steps-for-masonry/

#css #masonry #layout

@frontenddogma@mas.to · 3 months ago

Item Flow: Next Steps for Masonry, by @jensimmons and @saron.bsky.social ( @webkit):

https://webkit.org/blog/17219/item-flow-part-2-next-steps-for-masonry/

#css #masonry #layout

Log in

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances

Bonfire social · 1.0.0 no JS en

Automatic federation enabled