Сетка на Pure CSS - httpdoc.ru

Сетка на Pure.CSS

Итак, продолжим нашу тему. В концепции сеток мы используем два типа классов pure-g , класс сетки и / pure-u или pure-u-* классы единиц. Это основные классы, которые отвечают за адаптивный характер веб-сайта. Эти классы позволяют нам определять сетки в строках и столбцах в соответствии с нашими потребностями. Класс сетки будет определять сетку, а затем внутри нее элементы будут использовать классы единиц для определения содержимого.

Примечание. Для правильного рендеринга весь контент, видимый людям, должен содержаться внутри блока сетки.

Ниже приведены правила использования Pure Grids.

  • Как мы уже обсуждали ранее, ширина Единиц определяется в долях. Например, pure-u-1-4 представляет 1/4 или 25% ширины, pure-u-4-5 представляет 4/5 или 80% ширины и так далее.
  • Все элементы модуля должны быть дочерними по отношению к элементу сетки. См. Пример ниже, чтобы понять, как элемент unit должен быть помещен в сетку. Обратите внимание на классы.
Синтаксис
<div class="pure-g">
    <div class="pure-u-1-3">
        <p> Третьи</p>
    </div>
    <div class="pure-u-1-3">
        <p>Третьи</p>
    </div>
    <div class="pure-u-1-3">
        <p>Третьи</p>
    </div>
</div>
	

Размеры блока сетки

Чистая Сетка поставляется с 5th и 24th размерами единицы. Эти размеры блоков охватывают почти каждую сетку, вы можете использовать эти размеры блоков для рендеринга вашего контента. Примеры некоторых доступных модулей, которые могут быть добавлены в pure-ui- . Например, чтобы создать ячейку 40% шириной, вы можете использовать стиль css pure-ui-2-5 . Попробуйте сами попробовать больше единиц измерения, чтобы ознакомиться с использованием сетки.

Единицы на основе 5ths

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> Pure.CSS Grids </title>
    <meta name="viewport"   
      content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <style>
    .grids-example {
   background: rgb(250, 250, 250);
   font-family: Roboto, 'Liberation Mono', Courier, monospace;
   }

.grid-unit {
   padding-left: 30px;
   padding-top: 5px;
   }

.grid-unit .grid-unit-width {
   font-family: Roboto, 'Liberation Mono', Courier, monospace;
   }

.grid-unit-bar {
   height: 30px;
   border-radius: 5px;
   background: #7559ca;
   margin-bottom: 10px;
   }

</style>
  </head>
  <body>
    <div class="grids-example">
      <div class="grid-unit  pure-g">
        <div class="grid-unit-width pure-u">1-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit  pure-g">
        <div class="grid-unit-width pure-u">2-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-2-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit  pure-g">
        <div class="grid-unit-width pure-u">3-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-3-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">4-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-4-5"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">1</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-1"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">1-1</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-1-1"></div>
          </div>
        </div>
      </div>
      <div class="grid-unit pure-g">
        <div class="grid-unit-width pure-u">5-5</div>
        <div class="grid-unit-details pure-u-1">
          <div class="pure-g">
            <div class="grid-unit-bar pure-u-5-5"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Выход

Pure.CSS Grids
1-5
2-5
3-5
4-5
1
1-1
5-5

24-я базирующаяся единица

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> Pure.CSS Grids </title>
    <meta name="viewport"   
      content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
    <style>
    .grids-example {
   background: rgb(250, 250, 250);
   font-family: Roboto, 'Liberation Mono', Courier, monospace;
   }

.grid-unit {
   padding-left: 30px;
   padding-top: 5px;
   }

.grid-unit .grid-unit-width {
   font-family: Roboto, 'Liberation Mono', Courier, monospace;
   }

.grid-unit-bar {
   height: 30px;
   border-radius: 5px;
   background: #7559ca;
   margin-bottom: 10px;
   }

</style>
  </head>
  <body>
      
<div class = "grids-example">
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">1-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-1-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">1-12</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-1-12"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">2-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-2-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">3-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-3-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">1-8</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-1-8"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">4-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-4-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">1-6</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-1-6"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">5-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-5-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">1-4</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-1-4"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">6-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-6-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">7-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-7-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">1-3</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-1-3"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">22-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-22-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">23-24</div>
    <div class = "grid-unit-details pure-u-1">
      <div class = "pure-g">
        <div class = "grid-unit-bar pure-u-23-24"></div>
      </div>
    </div>
  </div>
  <div class = "grid-unit  pure-g">
    <div class = "grid-unit-width pure-u">1</div>
    <div class ="grid-unit-details pure-u-1">
      <div class="pure-g">
        <div class="grid-unit-bar pure-u-1"></div>
      </div>
    </div>
  </div>
  <div class="grid-unit  pure-g">
    <div class="grid-unit-width pure-u">1-1</div>
    <div class="grid-unit-details pure-u-1">
      <div class="pure-g">
        <div class="grid-unit-bar pure-u-1-1"></div>
      </div>
    </div>
  </div>
  <div class="grid-unit  pure-g">
    <div class="grid-unit-width pure-u">24-24</div>
    <div class="grid-unit-details pure-u-1">
      <div class="pure-g">
        <div class="grid-unit-bar pure-u-24-24"></div>
      </div>
    </div>
  </div>
</div>
</body>  
</html>

Выход

Pure.CSS Grids
1-24
1–12
2-24
3-24
1-8
4-24
1-6
5-24
1-4
6-24
7-24
1-3
22-24
23-24
1
1-1
24-24