Вы здесь:

CSS для таблицы (grid)

Информация о материале
Категория: Разное
Просмотров: 533

CSS Grid Layout Module
Документация по тегам "gap", "grid"

 

2 колонки

<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto;
            gap: 10px;
        }
        .grid-item {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
</div>
</body>

Результат: grid_2_col_v1.png https://v.perm.ru/images/css_grid/grid_2_col.html

3 колонки

<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }
        .grid-item {
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item">Column 1</div>
    <div class="grid-item">Column 2</div>
    <div class="grid-item">Column 3</div>
</div>
</body>
</html>

Результат: grid_3_col.png https://v.perm.ru/images/css_grid/grid_3_col.html

3 колонки (10%-20%-70%)

<html>
<head>
    <style>
        .box {
            background-color: rgb(83 134 234);
            border: 5px solid rebeccapurple;
            display: flow-root;
        }

        .p_left {
            float: left;
            width: 10%;
            height: 100px;
            background-color: white;
            border: 1px solid black;
            padding: 1pt;
        }
        .p_middle {
            float: left;
            width: 20%;
            height: 100px;
            background-color: white;
            border: 1px solid black;
            padding: 1pt;
        }
        .p_rigth {
        /* width уже не важен, займёт всё пространство справа */
        /* width: 20%; */
            float: right;
            background-color: white;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="p_left">float left 10%</div>
    <div class="p_middle">middle 20%</div>
    <div class="p_right">other space in the container.</div>
</div>
</body>
</html>

grid_inline_10_20_70.png https://v.perm.ru/images/css_grid/grid_inline_10_20_70.html

4 одинаковые колонки

<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 10px;
        }

        .grid-item {
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
</div>
</html>

grid_4_col.png https://v.perm.ru/images/css_grid/grid_4_col.html
Ещё примеры:

Меню

Теги

Вход