1linelayouts.glitch.me Open in urlscan Pro
35.172.196.51  Public Scan

Form analysis
0 forms found in the DOM

Text Content

1-LINE LAYOUTS*

*10 Modern CSS layout and sizing techniques that highlight just how robust and
impactful a single-line of styling code can be. [Watch the Video]


01. SUPER CENTERED PLACE-ITEMS: CENTER

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari

:)
HTML CSS

<div class="parent blue" >
<div class="box coral" contenteditable>
:)
</div> Explore on CodePen


02. THE DECONSTRUCTED PANCAKE FLEX: 0 1 <BASEWIDTH>

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari

1
2
3
HTML CSS

<div class="parent white">
<div class="box green">1</div>
<div class="box green">2</div>
<div class="box green">3</div>
</div> Explore on CodePen


03. SIDEBAR SAYS GRID-TEMPLATE-COLUMNS: MINMAX(<MIN>, <MAX>) ...

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari

Min: 150px / Max: 25%
This element takes the second grid position (1fr), meaning it takes up the rest
of the remaining space.
HTML CSS

<div class="parent">
<div class="section yellow" contenteditable>
Min: 150px / Max: 25%
</div>
<div class="section purple" contenteditable>
This element takes the second grid position (1fr), meaning
it takes up the rest of the remaining space.
</div>
</div>
Explore on CodePen


04. PANCAKE STACK GRID-TEMPLATE-ROWS: AUTO 1FR AUTO

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari

Header
Main
Footer Content
HTML CSS

<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
Explore on CodePen


05. CLASSIC HOLY GRAIL LAYOUT GRID-TEMPLATE: AUTO 1FR AUTO / AUTO 1FR AUTO

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari

Header
Left Sidebar
Main Content
Right Sidebar
Footer
HTML CSS

<div class="parent">
<header class="pink section">Header</header>
<div class="left-side blue section" contenteditable>Left Sidebar</div>
<main class="section coral" contenteditable> Main Content</main>
<div class="right-side yellow section" contenteditable>Right Sidebar</div>
<footer class="green section">Footer</footer>
</div>
Explore on CodePen


06. 12-SPAN GRID GRID-TEMPLATE-COLUMNS: REPEAT(12, 1FR)

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari

Span 12
Span 6
Span 4
Span 2
HTML CSS

<div class="parent white">
<div class="span-12 green section">Span 12</div>
<div class="span-6 coral section">Span 6</div>
<div class="span-4 blue section">Span 4</div>
<div class="span-2 yellow section">Span 2</div>
</div>
Explore on CodePen


07. RAM (REPEAT, AUTO, MINMAX) GRID-TEMPLATE-COLUMNS: REPEAT(AUTO-FIT,
MINMAX(<BASE>, 1FR))

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari

1
2
3
4
HTML CSS

<div class="parent white">
<div class="box pink">1</div>
<div class="box purple">2</div>
<div class="box blue">3</div>
<div class="box green">4</div>
</div>
Explore on CodePen


08. LINE UP JUSTIFY-CONTENT: SPACE-BETWEEN

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari


TITLE - CARD 1

Medium length description with a few more words here.




TITLE - CARD 2

Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.




TITLE - CARD 3

Short Description.


HTML CSS

<div class="parent white">
<div class="card yellow">
<h3>Title - Card 1</h3>
<p contenteditable>Medium length description with a few more words here.</p>
<div class="visual pink"></div>
</div>
<div class="card yellow">
<h3>Title - Card 2</h3>
<p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur
adipisicing elit.</p>
<div class="visual blue"></div>
</div>
<div class="card yellow">
<h3>Title - Card 3</h3>
<p contenteditable>Short Description.</p>
<div class="visual green"></div>
</div>
</div>
Explore on CodePen


09. CLAMPING MY STYLE CLAMP(<MIN>, <ACTUAL>, <MAX>)

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari


TITLE HERE



Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed
est error repellat veritatis.

HTML CSS

<div class="parent white">
<div class="card purple">
<h1>Title Here</h1>
<div class="visual yellow"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Sed est error repellat veritatis.</p>
</div>
</div>
Explore on CodePen


10. RESPECT FOR ASPECT ASPECT-RATIO: <WIDTH> / <HEIGHT>

Current Browser Support:
 * Edge
 * Firefox
 * Chrome
 * Safari


VIDEO TITLE



Descriptive text for aspect ratio card demo.

HTML CSS

<div class="parent white">
<div class="card blue">
<h1>Video Title</h1>
<div class="visual green"></div>
<p>Descriptive text for aspect ratio card demo.</p>
</div>
</div>
Explore on CodePen

Made with love by @una for web.dev