Grid

by Petr Haluza

HTML

<div class="exGrid">
<div class="exHeader">Zefektivněte svoji každodenní práci s počítačem Dell OptiPlex 3080 SFF</div>

<div class="exText">
<p><strong>Počítač Dell OptiPlex 3080 SFF kompaktních rozměrů</strong> do každé moderní kanceláře. Výkon v podobě procesoru <strong>Intel Core i5 desáté generace</strong> a <strong>nadstandardní 16GB RAM</strong> umožní efektivní práci s moderními aplikacemi, náročnou kancelářskou agendu, ale také přehrávání multimédií a <strong>náročný multitasking</strong>. I když je optimálně vybaven do podnikového prostředí, své uplatnění najde také v domácnosti.<strong> </strong></p>
</div>
<div class="exImage"><p style="text-align:center"><img alt="" src="https://www.img4.cz/imgProducts/images/images721/PCD3185%201.jpg" style="height:450px; width:270px"></p>
</div>
</div>

CSS

div > * { display: block; margin: 4px;  padding: 5px;  min-height: 80px; border: 1px solid #eebb55; background: #ffeebb;} 

div.exHeader { grid-area: title;}
div.exText { grid-area: paragraph }
div.exImage { grid-area: image }


div.exGrid {
      display: -ms-grid;
     display: grid;
        


		grid-template-areas: "title image"
                     "paragraph image";  }

JavaScript

// http://dev.w3.org/csswg/css-grid/