grid_styled_content
intro
#mtness

Agenda

Goals

A little history

Status quo

display:grid deep dive

Content elements with d:g

Bringing it all together

Goals

replace fluid_styled_content ASAP

provide state-of-the-art markup and styling

no need for post processing build chains

no need to rebuild standard content elements again and again (anymore)

easy and fun to use!

Bonus

  • add some sensible defaults to Elements
    [copyright, native video facades]
  • accessible container elements
  • Content Elements available as Content Blocks
  • deprecate GalleryProcessor?

Where do we come from?

A little history

[img browser wars]

HTML & CSS

separation of content and presentation

Tables
Floats
negative margins
holy grail layout
jQuery
Bootstrap
Tailwind
Every website looks the same^^

remember, this:

<div class="text-center text-red-400 text-lg">

Is the exact same ignorant bloated PRESENTATIONAL garbage as:

<center><font color="#F77272" size="+1">

Apart from the latter having one extra DOM element
and the former being more code.

TYPO3: css_styled_content
TYPO3: fluid_styled_content

Status quo

Technical basic recap

1kb Text < 1kb HTML < 1kb CSS < 1kb JS

Code/Content Ratio

"Performance"

HTML5

semantics

How many html tags do you know?

HTML5

Anatomy of a webpage:


							<html>
								<head></head>
								<body>
									

									

									

								</body>
							</html>

CSS3

"baseline compatibility"

  • widely available
  • newly available
  • limited availability

CSS3

selectors, i.e. :has()

custom properties aka "variables" (--*)

display:flex

display:grid

transitions

animations

Responsive | Adaptive

HTML is already inherently responsive!

(Designers are the ones screwing that over)

BUT: different viewports / device classes


"breakpoints"

desktop tablet handheld

→ @media queries, @container queries

Progressive Enhancement

text → html → css → js

"desktop-first" approach

With CSS it is also easier
to just turn off flex or grid
to strip off columns,
than it is to add them!


But keep in mind:
different devices are also used differently!

Accessibility

A whole topic on its own.

Covered in depth in a different room here.

and now...

Layout columns

with display:grid !

What is it all about, display:grid ?

First, the grid vocabulary

grid lines

{img}

grid cell

{img}

grid track

{img}

grid area

{img}

A basic grid

HTML

CSS 


							.x {
								display: grid;
								grid-template-columns: 1fr 1fr 1fr;
							}

[result]

there are lots of css grid attribute, but we focus on

grid lines.

named grid lines!

A grid with named lines:

CSS 


							.x {
								display: grid;
								grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
							}

Uuh! Ugly.

A grid with named lines

CSS: 


							.x {
								display: grid;
								grid-template-columns: 
									[main-start] 1fr 
										[content-start] 1fr [content-end] 
									1fr [main-end];
							}

Ah. Much better!

children with named columns

CSS: 


							.x :nth-child(1) { grid-column: main-start    / main-end;    }
							.x :nth-child(2) { grid-column: content-start / content-end; }
							.x :nth-child(3) { grid-column: content-start / main-end;    }

{result}

same applies to grid-row

on top of that, there is also grid-area

... but not now.

Structured Content:
"Content Elements"

What exactly is a content element ?

→ logically structured content

Err, what is structured content again?

Structured content refers to the concept of organizing and treating digital content like data. Publishing content as modular, discrete pieces of information that are tagged with machine-readable descriptions can transform how people find, understand, share, use, and reuse information.

from digital.gov

text

[header]

[subheader]

[bodytext]

media

[header]

[subheader]

[file(s)]

[alternative]

[title]

[description]

[copyright]

[link]

text AND media

  • media above text
    center left right
  • media below text
    center left right
  • media besides text
    left right
  • media in text
    left right

Wait, I found some more... !

  • text besides media
    left right
  • image left, text right
  • text left, image right

ok... , and what about responsive?


the layout of the element has to be adjusted to the viewport

"the narrower the viewport, the more linear the content flow"

But, remember, separation of concerns!


And I dont't want any of that stuff in my markup!!

So, what about the markup?

It stays the same for all elements!

(mostly)




	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, left

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, right

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Below, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Below, left

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Below, right

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
In text, left

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
In text, right

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.
(ok, mostly)



	

		
Image besides Text, right

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	

	

		

		

		

	



						



	

		

		

		

	

	

		
Image besides Text, left

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	



						



	

		

		

		

	

	

		
Text besides Image, right

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	



						



	

		
Text besides Image, left

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.
media(left|right) and text(right|left)
behave slightly different, though. :sad: 



	

		
		
		

			
©

			
NeoBlack CC BY 2.0

		

		
		
image description

	

	

		
Text + image

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	



						



	

		

			
			

				
©

				
NeoBlack CC BY 2.0

			

		

		
image description

	

	

		
image + Text

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.
You get the idea, I hope.

and the styling ?

Easy.

;D


body {
	--screen-margin       :   1.5rem;
	--screen-inset-width  :   5fr;
	--page-margin         :   3.33rem;
	--page-inset-left-min :   3.33rem;
	--page-inset-left-max :  10rem;
	--page-inset-right-min:   3.33rem;
	--page-inset-right-max:  10rem;
	--body-outset         :   3.33rem;
	--body-margin         :   1.5rem;
	--body-content-min    :  30rem;
	--body-content-max    :  45rem;

	margin: 0 auto;
	/*max-width: 1920px;*/
}
						

body .grid {
	display: grid;
	gap: 0;
	grid-template-columns:
		[screen-start] var(--screen-margin)
			[screen-start-inset] var(--screen-inset-width)
				[page-start] var(--page-margin)
					[page-start-inset] minmax( var(--page-inset-left-min), var(--page-inset-left-max) )

						[body-start-outset] var(--body-outset)
							[body-start] var(--body-margin)
								[body-content-start]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
									[center-line]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
								[body-content-end]
							var(--body-margin) [body-end]
						var(--body-outset) [body-end-outset]

					minmax( var(--page-inset-right-min), var(--page-inset-right-max) ) [page-end-inset]
				var(--page-margin) [page-end]
			var(--screen-inset-width) [screen-end-inset]
		var(--screen-margin) [screen-end];
}

tablet


@media (max-width: 70rem) {
	body .grid {
		grid-template-columns:
			[screen-start] var(--screen-margin)
				[screen-start-inset] var(--screen-inset-width)
					[page-start page-start-inset body-start-outset body-start] var(--body-margin)
						[body-content-start] minmax( var(--body-content-min), calc( var(--body-content-max) - 2 * var(--body-margin) )) [body-content-end]
					var(--body-margin) [body-end]
					var(--body-outset) [body-end-outset]
					minmax( var(--page-inset-right-min), var(--page-inset-right-max) ) [page-end-inset]
					var(--body-outset) [page-end]
				var(--screen-inset-width) [screen-end-inset]
			var(--screen-margin) [screen-end];
	}
}

mobile


@media (max-width: 20rem) {
	body .grid {
		grid-template-columns:
			[screen-start] var(--screen-margin)
				[screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] 
					minmax(0px, 1fr) 
				[body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset]
			var(--screen-margin) [screen-end];
	}
}
						

.page-full {
	grid-column: screen-start/screen-end;
}

.grid > * {
	grid-column: body-content-start/body-content-end;
}

.grid .content {
	grid-column  : body-content-start/body-content-end;
	grid-row     : content-top/content-bottom;
	align-content: flex-start;
}

.grid .column-body {
	grid-column: body-content-start/body-content-end;
}

.grid .column-body-outset {
	grid-column: body-start-outset/body-end-outset;
}

.grid .column-page {
	grid-column: page-start/page-end;
}

.grid .column-page-inset {
	grid-column: page-start-inset/page-end-inset;
}

.grid .column-screen {
	grid-column: screen-start/screen-end;
}

.grid .column-screen-inset {
	grid-column: screen-start-inset/screen-end-inset;
}

.grid .column-screen-inset.shaded {
	grid-column: screen-start/screen-end;
	padding: 1em;
	background: #888;
	margin-bottom: 1em;
	overflow: hidden;
}
.grid .column-screen-inset.shaded {

}

@media (min-width: 70em) {
	.column-before {
		grid-column: page-start/body-start;
		}

	.margin-caption,
	.aside,
	aside:not(.footnotes):not(.sidebar),
	.column-margin {
		grid-column: body-end/page-end;
		}
}

.grid .column-body-outset-right,
.grid .column-body-right {
	grid-column: body-content-start/body-end-outset;
}
.grid .column-page-inset-right {
	grid-column: body-content-start/page-end-inset;
}
.grid .column-page-right {
	grid-column: body-content-start/page-end;
}
.grid .column-screen-inset-right {
	grid-column: body-content-start/screen-end-inset;
}
.grid .column-screen-right {
	grid-column: body-content-start/screen-end;
}
.left {
	text-align: left;
	padding-left: 1em;
}




.grid .column-body-outset-left,
.grid .column-body-left {
	grid-column: body-start-outset/body-content-end;
}
.grid .column-page-inset-left {
	grid-column: page-start-inset/body-content-end;
}
.grid .column-page-left {
	grid-column: page-start/body-content-end;
}
.grid .column-screen-inset-left {
	grid-column: screen-start-inset/body-content-end;
}
.grid .column-screen-left {
	grid-column: screen-start/body-content-end;
}
.right {
	text-align: right;
	padding-right: 1em;
}
and, thats it, basically.

but wait, there is more!

Do we want to have custom styling (e.g. background-color)

→ [frame_class]

Bonus Level

nested content:
"Container Elements"

This is finally solved by ext:container, hopefully.

(Thank you Benny!)

For Container Elements,
the same principles apply
the appearance/positioning is controlled
via the [grid_class] in the wrapper tag.

These are the Elements which are commonly used:

1 column

2 columns

3 columns

4 columns

"accordion"

tabs

slider (?)

conerning accordions:

details>summary

Accessibility, remember ;)

Wether or not this should be part of GSC or not,
I do not now yet.


But I think it should.


Stay tuned!

putting it all together

ok, nice.

But how does this work within the backend?


Demo, or it didn't happen !

Benefits

less code

better accessibility

better maintainability

easy interface for editors

Todos

release ✓
composer req markustimtner/grid_styled_content

better icons

better layout dataprocessor

documentation

cleanup

gsc styleguide

"Marketing"

Any help is greatly appreciated.

Q: Can I use it with {framework} ?

A: D'oh. No. You shouldn't. Just don't.

Thank you!
#grid_styled_content

changelog

1.0.0 2024-11-10 initial Version: presented at T3CRR24