6 layout Layout
Layout rules for the main content area, demonstrating CSS Grid layout elements. Columns are fluid in all breakpoints, to a maximum width of 80 ems in order to preserve readability.
Special Note: At this time, some versions of Safari don't support all CSS Grid elements, so particular features such as column grid demos may not be visible there.
For demos pertaining to content areas, image/figure placeholders are included to show how those elements are displayed, at all responsive breakpoints.
Please note the bottom margins/padding may appear to be minimal—due to default setttings. This is often changed for particular content types.
sass/styles.scss, line 36
6.1 layout.sidebars-both Sidebars Both
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Sidebars Both region styling, demonstrating ordering and stacking at narrower breakpoints. This shows default spacing.
Content
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.
Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-both.twig
<div class="body-sidebars-both grid-container">
<aside class="sidebar-first" style="background: rgba(255,228,196,0.5);">
<h3>Sidebar First</h3>
<p>Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar.</p>
</aside>
<section id="content" style="background: rgba(222, 184, 135, 0.5);">
<h3>Content</h3>
<p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.</p>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
roll jujubes.</p>
<p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
fruitcake.</p>
<p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
jelly.</p>
</section>
<aside class="sidebar-second" style="background: rgba(250, 235 ,215, 0.5);">
<h3>Sidebar Second</h3>
<p>Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar.</p>
</aside>
</div>
<!-- CSS Grid Column Demos -->
<div class="body-sidebars-both grid-container columndemocontainer">
<div class="columndemo" id="cd01"></div>
<div class="columndemo" id="cd02"></div>
<div class="columndemo" id="cd03"></div>
<div class="columndemo" id="cd04"></div>
<div class="columndemo" id="cd05"></div>
<div class="columndemo" id="cd06"></div>
<div class="columndemo" id="cd07"></div>
<div class="columndemo" id="cd08"></div>
<div class="columndemo" id="cd09"></div>
<div class="columndemo" id="cd10"></div>
<div class="columndemo" id="cd11"></div>
<div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->sass/layout/_sidebars.scss, line 1
6.2 layout.sidebars-first Sidebar First
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Sidebar First region styling, demonstrating ordering and stacking at narrower breakpoints. This shows default spacing.
Content
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.
Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-first.twig
<div class="body-sidebars-first grid-container">
<aside class="sidebar-first" style="background: rgba(255,228,196,0.5);">
<h3>Sidebar First</h3>
<p>Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar.</p>
</aside>
<section id="content" style="background: rgba(222, 184, 135, 0.5);">
<h3>Content</h3>
<p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.</p>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
roll jujubes.</p>
<p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
fruitcake.</p>
<p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
jelly.</p>
</section>
</div>
<!-- CSS Grid Column Demos -->
<div class="body-sidebars-first grid-container columndemocontainer">
<div class="columndemo" id="cd01"></div>
<div class="columndemo" id="cd02"></div>
<div class="columndemo" id="cd03"></div>
<div class="columndemo" id="cd04"></div>
<div class="columndemo" id="cd05"></div>
<div class="columndemo" id="cd06"></div>
<div class="columndemo" id="cd07"></div>
<div class="columndemo" id="cd08"></div>
<div class="columndemo" id="cd09"></div>
<div class="columndemo" id="cd10"></div>
<div class="columndemo" id="cd11"></div>
<div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->sass/layout/_sidebars.scss, line 12
6.3 layout.sidebars-second Sidebar Second
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Sidebar Second region styling, demonstrating ordering and stacking at narrower breakpoints. This shows default spacing.
Content
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.
Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-second.twig
<div class="body-sidebars-second grid-container">
<section id="content" style="background: rgba(222, 184, 135, 0.5);">
<h3>Content</h3>
<p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.</p>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
roll jujubes.</p>
<p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
fruitcake.</p>
<p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
jelly.</p>
</section>
<aside class="sidebar-second" style="background: rgba(250, 235 ,215, 0.5);">
<h3>Sidebar Second</h3>
<p>Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar></p>
</aside>
</div>
<!-- CSS Grid Column Demos -->
<div class="body-sidebars-second grid-container columndemocontainer">
<div class="columndemo" id="cd01"></div>
<div class="columndemo" id="cd02"></div>
<div class="columndemo" id="cd03"></div>
<div class="columndemo" id="cd04"></div>
<div class="columndemo" id="cd05"></div>
<div class="columndemo" id="cd06"></div>
<div class="columndemo" id="cd07"></div>
<div class="columndemo" id="cd08"></div>
<div class="columndemo" id="cd09"></div>
<div class="columndemo" id="cd10"></div>
<div class="columndemo" id="cd11"></div>
<div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->sass/layout/_sidebars.scss, line 22
6.4 layout.sidebars-none Sidebars None
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Sidebars None region styling. This shows default spacing.
Content
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.
Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-none.twig
<div class="body-sidebars-none grid-container">
<section id="content" style="background: rgba(222, 184, 135, 0.5);">
<h3>Content</h3>
<p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.</p>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
roll jujubes.</p>
<p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
fruitcake.</p>
<p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
jelly.</p>
</section>
</div>
<!-- CSS Grid Column Demos -->
<div class="body-sidebars-none grid-container columndemocontainer">
<div class="columndemo" id="cd01"></div>
<div class="columndemo" id="cd02"></div>
<div class="columndemo" id="cd03"></div>
<div class="columndemo" id="cd04"></div>
<div class="columndemo" id="cd05"></div>
<div class="columndemo" id="cd06"></div>
<div class="columndemo" id="cd07"></div>
<div class="columndemo" id="cd08"></div>
<div class="columndemo" id="cd09"></div>
<div class="columndemo" id="cd10"></div>
<div class="columndemo" id="cd11"></div>
<div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->sass/layout/_sidebars.scss, line 32
6.5 layout.sidebars-first-content Sidebar First Content
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Sidebars First Content – Used for content types with long-form text elements to improve readability in the main content area by limiting the paragraph width.
Content
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.
Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-first-content.twig
<div class="body-sidebars-first sidebars-first-content-demo grid-container">
<aside class="sidebar-first" style="background: rgba(255,228,196,0.5);">
<h3>Sidebar First</h3>
<p>Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar.</p>
</aside>
<section id="content" style="background: rgba(222, 184, 135, 0.5);">
<h3>Content</h3>
<p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.</p>
<article class="align-right media_image_half_width">
<div class="imagefiller group">
<div class="filler-content">
Image — Half-Width Left Align
</div>
</div>
</article>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
roll jujubes.</p>
<p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
fruitcake.</p>
<p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
jelly.</p>
</section>
</div>
<!-- CSS Grid Column Demos -->
<div class="body-sidebars-first grid-container columndemocontainer">
<div class="columndemo" id="cd01"></div>
<div class="columndemo" id="cd02"></div>
<div class="columndemo" id="cd03"></div>
<div class="columndemo" id="cd04"></div>
<div class="columndemo" id="cd05"></div>
<div class="columndemo" id="cd06"></div>
<div class="columndemo" id="cd07"></div>
<div class="columndemo" id="cd08"></div>
<div class="columndemo" id="cd09"></div>
<div class="columndemo" id="cd10"></div>
<div class="columndemo" id="cd11"></div>
<div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->sass/layout/_sidebars.scss, line 42
6.6 layout.sidebars-second-content Sidebar Second Content
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Sidebars Second Content – Used for content types with long-form text elements to improve readability in the main content area by limiting the paragraph width.
Content
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.
Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-second-content.twig
<div class="body-sidebars-second sidebars-second-content-demo grid-container">
<section id="content" style="background: rgba(222, 184, 135, 0.5);">
<h3>Content</h3>
<p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.</p>
<article class="align-left media_image_half_width">
<div class="imagefiller group">
<div class="filler-content">
Image — Half-Width Left Align
</div>
</div>
</article>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
roll jujubes.</p>
<p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
fruitcake.</p>
<p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
jelly.</p>
</section>
<aside class="sidebar-second" style="background: rgba(250, 235 ,215, 0.5);">
<h3>Sidebar Second</h3>
<p>Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar.</p>
</aside>
</div>
<!-- CSS Grid Column Demos -->
<div class="body-sidebars-second grid-container columndemocontainer">
<div class="columndemo" id="cd01"></div>
<div class="columndemo" id="cd02"></div>
<div class="columndemo" id="cd03"></div>
<div class="columndemo" id="cd04"></div>
<div class="columndemo" id="cd05"></div>
<div class="columndemo" id="cd06"></div>
<div class="columndemo" id="cd07"></div>
<div class="columndemo" id="cd08"></div>
<div class="columndemo" id="cd09"></div>
<div class="columndemo" id="cd10"></div>
<div class="columndemo" id="cd11"></div>
<div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->sass/layout/_sidebars.scss, line 53
6.7 layout.sidebars-none-content Sidebars None Content
Toggle full screen Open in new window Toggle example guides Toggle HTML markup
Sidebars None Content – Used for content types with long-form text elements to improve readability in the main content area by limiting the paragraph width.
Content
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.
Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.
Markup: layout/sidebars-none-content.twig
<div class="body-sidebars-none sidebars-none-content-demo grid-container">
<section id="content" style="background: rgba(222, 184, 135, 0.5);">
<h3>Content</h3>
<p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.</p>
<article class="align-right media_image_half_width">
<div class="imagefiller group">
<div class="filler-content">
Image — Half-Width Right Align
</div>
</div>
</article>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
roll jujubes.</p>
<p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
fruitcake.</p>
<p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
jelly.</p>
</section>
</div>
<!-- CSS Grid Column Demos -->
<div class="body-sidebars-none grid-container columndemocontainer">
<div class="columndemo" id="cd01"></div>
<div class="columndemo" id="cd02"></div>
<div class="columndemo" id="cd03"></div>
<div class="columndemo" id="cd04"></div>
<div class="columndemo" id="cd05"></div>
<div class="columndemo" id="cd06"></div>
<div class="columndemo" id="cd07"></div>
<div class="columndemo" id="cd08"></div>
<div class="columndemo" id="cd09"></div>
<div class="columndemo" id="cd10"></div>
<div class="columndemo" id="cd11"></div>
<div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->sass/layout/_sidebars.scss, line 63