Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Grid

Grid układ siatki

kodzik

układ siatki – przykład 1

<div class="wrap">
    <div class="grid">1</div>
    <div class="grid">2</div>
    <div class="grid">3</div>
    <div class="grid">4</div>
    <div class="grid">5</div>
    <div class="grid">6</div>
</div>Code language: HTML, XML (xml)
.wrap {
    border: 1px dashed white;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    gap: 3px;
}Code language: CSS (css)
1
2
3
4
5
6

układ siatki – przykład 2

<div class="wrap">
    <div class="grid">1</div>
    <div class="grid">2</div>
    <div class="grid">3</div>
    <div class="grid">4</div>
    <div class="grid">5</div>
    <div class="grid">6</div>
</div>Code language: HTML, XML (xml)
.wrap {
    border: 1px dashed white;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 70px 70px;
    gap: 3px;
}Code language: CSS (css)
1
2
3
4
5
6

układ siatki – przykład 3

<div class="wrap">
    <div class="grid">1</div>
    <div class="grid">2</div>
    <div class="grid">3</div>
    <div class="grid">4</div>
    <div class="grid">5</div>
    <div class="grid">6</div>
</div>Code language: HTML, XML (xml)
.wrap {
    border: 1px dashed white;
    width: 400px;
    height: 200px;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 70px 70px;
    gap: 3px;
}Code language: CSS (css)
1
2
3
4
5
6

układ siatki – przykład 4

<div class="wrap">
    <div class="grid">1</div>
    <div class="grid">2</div>
    <div class="grid">3</div>
    <div class="grid">4</div>
    <div class="grid">5</div>
    <div class="grid">6</div>
</div>Code language: HTML, XML (xml)
.wrap {
    border: 1px dashed white;
    width: 400px;
    height: 200px;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 70px 70px;
    gap: 3px;
}

.grid  {
    width: 50px;
    height: 50px;
}Code language: CSS (css)
1
2
3
4
5
6

linki