Autoprefixer CSS online

Ściąga kodera

Transform, animations, grid, css, shortcode, Wordpress

Grid

grid-auto-flow

kodzik

grid-auto-flow: column vs row

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrap" style="grid-auto-flow: column;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
</div>Code language: HTML, XML (xml)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrap" style="grid-auto-flow: row;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
</div>Code language: HTML, XML (xml)
.wrap {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px;
    border: 1px dashed white;
    padding: 10px;   
}

.wrap > div {
    background: #289dcc;
    text-align: center;
    padding: 20px 0;
}Code language: CSS (css)

play demo W3S

1. grid-auto-flow: column

grid 1
grid 2
grid 3
grid 4
<div class="wrap">
    <div class="grid">grid 1</div>
    <div class="grid">grid 2</div>
    <div class="grid">grid 3</div>
    <div class="grid">grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap {
    display: inline-grid;
    grid-auto-flow: column;
}Code language: CSS (css)

2. grid-auto-flow: column

grid 1
grid 2
grid 3
grid 4
<div class="wrap">
    <div class="grid">grid 1</div>
    <div class="grid">grid 2</div>
    <div class="grid">grid 3</div>
    <div class="grid">grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
}

.wrap .grid {
    width: 150px;
}Code language: CSS (css)

1. grid-auto-flow: row

grid 1
grid 2
grid 3
grid 4
<div class="wrap">
    <div class="grid">grid 1</div>
    <div class="grid">grid 2</div>
    <div class="grid">grid 3</div>
    <div class="grid">grid 4</div>
</div>Code language: HTML, XML (xml)
.wrap {
    display: inline-grid;
    grid-auto-flow: row;
}Code language: CSS (css)

linki