Precvičovanie Grid

Pre každú úlohu upravte css tak, aby kontajner naľavo vyzeral ako výsledok napravo.

1. úloha

Riadky majú výšku postupne 50px, 300px a 50px a stĺpce šírku 150px a 250px

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ PIATY ŠIESTY

2. úloha

Riadky aj stĺpce gridu sú rovnako veľké, 3x3, medzera je 10px

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ PIATY ŠIESTY SIEDMY

3. úloha

Riadky aj stĺpce gridu sú rovnako veľké, 3x3

PRVÝ DRUHÝ

4. úloha

Riadky aj stĺpce gridu sú rovnako veľké, 5x5. Použite kľúčové slovo span.

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ

5. úloha

Na umiestňovanie použite area vlastnosti, hlavička a pätička majú výšku 50px. Sĺpce menu a ads majú maximálnu šírku 100px. Všetky bunky pri zmenšení ostávajú aspoň také široké, aby texty ostali v danej oblasti.

Hlavička Menu Článok Ads Pätička

6. úloha

Riadky aj stĺpce gridu sú rovnako veľké, 3x3

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ PIATY ŠIESTY SIEDMY

7. úloha

Bunky gridu majú veľkosť 100px x 100px.

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ PIATY ŠIESTY SIEDMY

8. úloha

Bunky gridu majú veľkosť 100px x 100px.

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ PIATY ŠIESTY SIEDMY

9. úloha

Použite automatický layout

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ PIATY

10. úloha

Veľkosť buniek gridu je daná veľkosťou textu v nich

PRVÝ DRUHÝ TRETÍ ŠTVRTÝ PIATY ŠIESTY SIEDMY

11. úloha

Nasledujúce karty nastavte tak, že majú minimálnu šírku 300px a vykresľujú sa do toľkých stĺpcov, koľko ich vojde do okna.

Genrický nadpis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptas explicabo fugit, libero deserunt cumque accusantium eos nisi. Temporibus quos, totam cumque vitae excepturi sed. Explicabo neque officiis ullam architecto?

Genrický nadpis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptas explicabo fugit, libero deserunt cumque accusantium eos nisi. Temporibus quos, totam cumque vitae excepturi sed. Explicabo neque officiis ullam architecto?

Genrický nadpis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptas explicabo fugit, libero deserunt cumque accusantium eos nisi. Temporibus quos, totam cumque vitae excepturi sed. Explicabo neque officiis ullam architecto?

Genrický nadpis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptas explicabo fugit, libero deserunt cumque accusantium eos nisi. Temporibus quos, totam cumque vitae excepturi sed. Explicabo neque officiis ullam architecto?

Genrický nadpis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptas explicabo fugit, libero deserunt cumque accusantium eos nisi. Temporibus quos, totam cumque vitae excepturi sed. Explicabo neque officiis ullam architecto?

Genrický nadpis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptas explicabo fugit, libero deserunt cumque accusantium eos nisi. Temporibus quos, totam cumque vitae excepturi sed. Explicabo neque officiis ullam architecto?

Genrický nadpis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptas explicabo fugit, libero deserunt cumque accusantium eos nisi. Temporibus quos, totam cumque vitae excepturi sed. Explicabo neque officiis ullam architecto?