V tomto příkladu jsme vytvořili záhlaví, tři nestejné sloupce a zápatí. Na menších obrazovkách se sloupce naskládají na sebe.
Změňte velikost okna prohlížeče, abyste viděli responzivní efekt.
Poznámka: Modul Grid Layout Module není podporován v Internet Exploreru nebo Edge 15 a starších verzích.
Lorem ipsum dolor sit amet consectetuer sodales turpis vitae et eu. At a parturient condimentum sodales Aliquam dolor et tristique congue lacus. Nulla lacinia eget fringilla hendrerit nisl turpis In pellentesque fames ut. Hendrerit tortor nulla pede felis hendrerit vel semper vel rutrum congue. Phasellus Curabitur neque turpis sapien auctor condimentum tortor Vestibulum Aliquam dictumst. Sit laoreet nibh enim convallis id et metus adipiscing sed natoque. Lacinia In.
Morbi cursus Vestibulum non elit Aenean nibh adipiscing et at est. Magna lorem laoreet nulla pede quis elit et convallis eget Mauris. Nam In Aliquam metus sapien aliquet non a pellentesque amet congue. Nisl auctor adipiscing Nullam Lorem Vestibulum feugiat Curabitur Curabitur orci sit. Id wisi sed pellentesque egestas rutrum arcu ac parturient laoreet ullamcorper. Consectetuer felis lacus Nullam Curabitur vitae Lorem Phasellus nec mattis eget. Aliquam fringilla.
Eu nibh congue Vestibulum justo pellentesque turpis quis justo sem Nulla. Aenean pretium Pellentesque Cum et Phasellus mauris nunc habitasse egestas pretium. Pulvinar ligula vel urna vitae lorem laoreet dis tellus Cras ullamcorper. Arcu turpis velit congue ac a at Donec libero tincidunt risus. Vitae habitant id dignissim Curabitur consectetuer at sollicitudin.
Adipiscing tortor mollis vel id hendrerit id condimentum pede Maecenas nulla. In auctor sodales Nunc turpis enim pulvinar interdum elit risus nibh. Nec adipiscing pretium nibh pretium Donec In cursus adipiscing lorem mauris. Nulla laoreet fringilla nascetur porttitor volutpat eros dui augue wisi Integer. Tincidunt eu massa Suspendisse id mi pretium vitae cursus malesuada Curabitur.
Condimentum sagittis id lacus neque id netus ut a et pellentesque. Ullamcorper venenatis at vel mi orci interdum mi vitae condimentum ornare. Porttitor Cum leo sed id tincidunt porttitor nec non in vitae. Quis dapibus justo elit Nam tellus vel sit laoreet libero wisi. Nibh condimentum Curabitur accumsan sagittis iaculis turpis mauris urna neque tortor. Metus laoreet wisi eu velit lobortis justo laoreet volutpat.
Lorem ipsum dolor sit amet consectetuer Sed elit fringilla cursus Vestibulum. Nam Nunc interdum lacus quis elit eros feugiat Nunc et Nunc. Ante quis congue accumsan cursus consequat Pellentesque et Nam egestas nibh. Eleifend nibh facilisi ullamcorper adipiscing arcu nunc dictumst Morbi Curabitur leo. At et pretium dolor at euismod odio libero justo Donec Nam. Hendrerit Nam Curabitur nunc Vestibulum quis vel tincidunt pretium.
Ante molestie vitae ac felis Ut Curabitur penatibus et pede consectetuer. Ac vitae lacus et consectetuer Curabitur velit Vestibulum justo elit felis. Vestibulum Nulla tellus Pellentesque pulvinar pretium at Pellentesque nibh at congue. Euismod a metus malesuada Vestibulum enim Aenean laoreet eu mi Pellentesque. Volutpat netus orci aliquet Nullam Sed pretium hendrerit enim lorem congue. Vitae leo vitae.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header {
grid-area: header;
background-color: #f1f1f1;
border:1px solid Silver;
padding: 0.5em;
text-align: center;
font-size: 1.2em;
}
/* The grid container */
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'left middle middle middle middle right'
'footer footer footer footer footer footer';
/* grid-column-gap: 10px; - if you want gap between the columns */
}
.left,
.middle,
.right {
padding: 0.5em;
height: auto
border:1px solid Silver;
}
/* Style the left column */
.left {
grid-area: left;
}
/* Style the middle column */
.middle {
grid-area: middle;
}
/* Style the right column */
.right {
grid-area: right;
}
/* Style the footer */
.footer {
grid-area: footer;
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.grid-container {
grid-template-areas:
'header header header header header header'
'left left left left left left'
'middle middle middle middle middle middle'
'right right right right right right'
'footer footer footer footer footer footer';
}
}
</style>
</head>
<body>
<h2>Šablona CSS pomocí mřížky</h2>
<p>V tomto příkladu jsme vytvořili záhlaví, tři nestejné sloupce a zápatí. Na menších obrazovkách se sloupce naskládají na sebe.</p>
<p>Změňte velikost okna prohlížeče, abyste viděli responzivní efekt.</p>
<p><strong>Poznámka:</strong> Modul Grid Layout Module není podporován v Internet Exploreru nebo Edge 15 a starších verzích.</p>
<div class="grid-container">
<div class="header"><h2>Hlavička</h2></div>
<div class="left" style="background-color:#aaa;">
<h2>Levý sloupec</h2>
<ul>
<li>jedna řádka</li>
<li>druhá řádka</li>
<li>třetí řádka</li>
<li>čtvrtá řádka</li>
<li>pátá řádka</li>
<li>šestá řádka</li>
</ul>
</div>
<div class="middle" style="background-color:#bbb;">
<h2>Prostřední sloupec</h2>
<p>Lorem ipsum dolor sit amet consectetuer sodales turpis vitae et eu. At a parturient condimentum sodales Aliquam dolor et tristique congue lacus. Nulla lacinia eget fringilla hendrerit nisl turpis In pellentesque fames ut. Hendrerit tortor nulla pede felis hendrerit vel semper vel rutrum congue. Phasellus Curabitur neque turpis sapien auctor condimentum tortor Vestibulum Aliquam dictumst. Sit laoreet nibh enim convallis id et metus adipiscing sed natoque. Lacinia In.</p>
<p>Morbi cursus Vestibulum non elit Aenean nibh adipiscing et at est. Magna lorem laoreet nulla pede quis elit et convallis eget Mauris. Nam In Aliquam metus sapien aliquet non a pellentesque amet congue. Nisl auctor adipiscing Nullam Lorem Vestibulum feugiat Curabitur Curabitur orci sit. Id wisi sed pellentesque egestas rutrum arcu ac parturient laoreet ullamcorper. Consectetuer felis lacus Nullam Curabitur vitae Lorem Phasellus nec mattis eget. Aliquam fringilla.</p>
<p>Eu nibh congue Vestibulum justo pellentesque turpis quis justo sem Nulla. Aenean pretium Pellentesque Cum et Phasellus mauris nunc habitasse egestas pretium. Pulvinar ligula vel urna vitae lorem laoreet dis tellus Cras ullamcorper. Arcu turpis velit congue ac a at Donec libero tincidunt risus. Vitae habitant id dignissim Curabitur consectetuer at sollicitudin.</p>
<p>Adipiscing tortor mollis vel id hendrerit id condimentum pede Maecenas nulla. In auctor sodales Nunc turpis enim pulvinar interdum elit risus nibh. Nec adipiscing pretium nibh pretium Donec In cursus adipiscing lorem mauris. Nulla laoreet fringilla nascetur porttitor volutpat eros dui augue wisi Integer. Tincidunt eu massa Suspendisse id mi pretium vitae cursus malesuada Curabitur. </p>
<p>Condimentum sagittis id lacus neque id netus ut a et pellentesque. Ullamcorper venenatis at vel mi orci interdum mi vitae condimentum ornare. Porttitor Cum leo sed id tincidunt porttitor nec non in vitae. Quis dapibus justo elit Nam tellus vel sit laoreet libero wisi. Nibh condimentum Curabitur accumsan sagittis iaculis turpis mauris urna neque tortor. Metus laoreet wisi eu velit lobortis justo laoreet volutpat.</p>
</div>
<div class="right" style="background-color:#ccc;">
<h2>Pravý sloupec</h2>
<p>Lorem ipsum dolor sit amet consectetuer Sed elit fringilla cursus Vestibulum. Nam Nunc interdum lacus quis elit eros feugiat Nunc et Nunc. Ante quis congue accumsan cursus consequat Pellentesque et Nam egestas nibh. Eleifend nibh facilisi ullamcorper adipiscing arcu nunc dictumst Morbi Curabitur leo. At et pretium dolor at euismod odio libero justo Donec Nam. Hendrerit Nam Curabitur nunc Vestibulum quis vel tincidunt pretium.</p>
<p>Ante molestie vitae ac felis Ut Curabitur penatibus et pede consectetuer. Ac vitae lacus et consectetuer Curabitur velit Vestibulum justo elit felis. Vestibulum Nulla tellus Pellentesque pulvinar pretium at Pellentesque nibh at congue. Euismod a metus malesuada Vestibulum enim Aenean laoreet eu mi Pellentesque. Volutpat netus orci aliquet Nullam Sed pretium hendrerit enim lorem congue. Vitae leo vitae.</p>
</div>
<div class="footer"><h2>Patička</h2></div>
</div>
</body>
</html>