Skip to content

Commit 61195b6

Browse files
UnderlineWordsUnderlineWords
committed
007
1 parent b0ff370 commit 61195b6

1 file changed

Lines changed: 24 additions & 25 deletions

File tree

‎elements/grid/index.html‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@ <h2 class="display-flex mb-10">
129129
<div class="content">
130130
<div class="container">
131131
<div class="row m-2 gap-8 weight-bold">
132-
<div class="col-16 bordered p-10">16</div>
133132
<div class="col-lg-1 col-sm-16 col-xs-16 bordered p-10">1</div>
134133
<div class="col-lg-15 col-sm-16 col-xs-16 bordered p-10">15</div>
135134
<div class="col-lg-2 col-sm-16 col-xs-16 bordered p-10">2</div>
@@ -297,52 +296,52 @@ <h2 class="display-flex mb-10">
297296
</script>
298297
</div>
299298
<div class="header">
300-
<div class="title">Equal Height</div>
299+
<div class="title">Responsive Columns</div>
301300
</div>
302301
<div class="content">
303-
<div class="equal row">
304-
<div class="col-4 border-1 p-10">
302+
<div class="row">
303+
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">
305304
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.
306305
</div>
307-
<div class="col-4 border-1 p-10">col-4</div>
308-
<div class="col-4 border-1 p-10">
309-
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi
310-
nonumes
306+
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">col-lg-4</div>
307+
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">
308+
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes
311309
vulputate, sed cibo incorrupte ad, no nam atqui accusam.
312310
</div>
313-
<div class="col-4 border-1 p-10">col-4</div>
311+
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">col-lg-4</div>
314312
</div>
315313
</div>
316314
<div class="content">
317315
<script type="text/plain" class="language-html">
318-
<div class="equal row">
319-
...
316+
<div class="row">
317+
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
318+
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
319+
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
320+
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
320321
</div>
321322
</script>
322323
</div>
323324
<div class="header">
324-
<div class="title">Responsive Columns</div>
325+
<div class="title">Equal Height</div>
325326
</div>
326327
<div class="content">
327-
<div class="row">
328-
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">
328+
<div class="equal row">
329+
<div class="col-4 border-1 p-10">
329330
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.
330331
</div>
331-
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">col-lg-4</div>
332-
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">
333-
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes
332+
<div class="col-4 border-1 p-10">col-4</div>
333+
<div class="col-4 border-1 p-10">
334+
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi
335+
nonumes
334336
vulputate, sed cibo incorrupte ad, no nam atqui accusam.
335337
</div>
336-
<div class="col-lg-4 col-sm-16 col-xs-16 border-1 p-10">col-lg-4</div>
338+
<div class="col-4 border-1 p-10">col-4</div>
337339
</div>
338340
</div>
339341
<div class="content">
340342
<script type="text/plain" class="language-html">
341-
<div class="row">
342-
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
343-
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
344-
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
345-
<div class="col-lg-4 col-sm-16 col-xs-16"></div>
343+
<div class="equal row">
344+
...
346345
</div>
347346
</script>
348347
</div>
@@ -352,9 +351,9 @@ <h2 class="display-flex mb-10">
352351
</div>
353352
</div>
354353
<div class="content">
355-
Punica CSS Framework's Grid system supports up to 16 columns and includes an offset feature with responsive flexibility. Offset classes, such as <code>offset-sm-2</code>, <code>offset-md-5</code>, <code>offset-lg-2</code>, <code>offset-xl-9</code>, and <code>offset-xxl-8</code>, allow you to create empty spaces within the grid at different breakpoints. This enables precise control over content alignment and spacing, ensuring adaptable and balanced layouts across various screen sizes.
354+
Punica CSS Framework's Grid system supports up to 16 columns and includes an offset feature with responsive flexibility. Offset classes, such as <code>offset-sm-{*}</code>, <code>offset-md-{*}</code>, <code>offset-lg-{*}</code>, <code>offset-xl-{*}</code>, and <code>offset-xxl-{*}</code>, allow you to create empty spaces within the grid at different breakpoints. This enables precise control over content alignment and spacing, ensuring adaptable and balanced layouts across various screen sizes.
356355
</div>
357-
<div class="content">
356+
<div class="content mt-30">
358357
<div class="row text-center gap-8">
359358
<div class="col-lg-4 offset-lg-2 col-xs-16 bordered p-10">
360359
col-lg-4 offset-lg-2

0 commit comments

Comments
 (0)