SaveText.Ru

Без имени
  1. 1)      Всем привет, тема моей презентации CSS Grid Layout. Я расскажу о поддержке данной спецификации браузерами, отличиях grid от flexbox и основных возможностях grid.
  2. 2)       Февраль-Март 2017 года запомнились для многих, кто работает с HTML и CSS тем, что большинство браузеров выпустили обновления, среди которых были и обновления для CSS. Теперь в 2019 году можно использовать спецификацию CSS Grid Layout пракически во всех браузерах без затруднений.
  3. 3)      Многие задаются вопросом: «Стоп, я использую flexbox, зачем мне еще какие-то grid’ы?». Вопрос более чем уместен. CSS Grid не заменит Flexbox и наоборот. Первое отличие — это то, что Flexbox работает только в одном измерении. Из этого следует, что мы можем размещать flex элементы только вдоль главной оси или вдоль поперечной оси. Мы не можем разместить flex элементы сразу на нескольких осях. CSS Grid в свою очередь нам позволяет работать с разметкой в двухмерном пространстве и выравнивать содержимое в обоих измерениях.
  4. 4)      Прежде чем приступать к работе с CSS Grid, нужно разобраться с основными терминами. На основе этих терминов построена вся спецификация.
  5.  
  6. Grid container — это набор пересекающихся горизонтальных и вертикальных grid линий, которые делят пространство grid контейнера на grid области, в которые могут быть помещены grid элементы. Внутри grid контейнера есть два набора grid линий: один определяет ось столбцов, другой определяет ось строк.
  7.  
  8. Grid lines — это горизонтальные и вертикальные разделители grid контейнера. Эти линии находятся по обе стороны от столбца или строки. Автор может задать для данного элемента имя или числовой индекс, который может использовать дальше в стилях.
  9.  
  10. Grid track — это пространство между двумя смежными grid линиями, вертикальными или горизонтальными.
  11.  
  12. Grid cell — это наименьшая неделимая единица grid контейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.
  13.  
  14. Grid area — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.
  15.  
  16. 5)      Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.
  17. 6)      Мы определяем ряды и столбцы в нашей сетке при помощи свойств grid-template-columns и grid-template-rows. В примере мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.
  18. 7)      Размер треков (полос) может быть задан с помощью любой единицы длины. Новая единица длины fr представляет собой долю доступного пространства в грид-контейнере. Auto и fr в некоторых случаях  работают одинаково, однако fr рассчитывается после того, как будет рассчитан блок auto.
  19. 8)      Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.
  20. Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.
  21. 9)      Грид-элемент может быть и грид-контейнером. Что продемонстрировано на рисунке.
  22.  
  23. Помимо всего перечисленного в Grid используется repeat(),minmax() для быстрого создания блоков и управления размерами блока. Grid способен управлять размерами и позиционированием блоков  относительно Grid Line при помощи свойств  grid-column-start, grid-column-end, grid-row-start и grid-row-end. Зазоры между блоками можно создавать при помощи свойств grid-column-gap и grid-row-gap или с помощью сокращённого свойства grid-gap. Так же полезными будут такие свойства как: justify-items/content, align-items/content,grid-auto-flow. Применяющиеся к дочернему блоку свойства justify/align-self.
  24. 10)     С помощью Grid можно с большей скоростью, удобством и оригинальностью решить те задачи, что при помощи flexbox, float свойств или таблиц.Grid как и flexbox, это ещё один иструмент для вёрстки, который имеет свои преимущества и недостатки. Никто не скажет: «Вот здесь используй Grid, а здесь — нет». Если реализация задачи на Grid заняла в два раза больше времени, чем на flexbox, значит, такие задачи не надо решать на Grid, это дело вашего опыта.
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39. 1)      Hello Everyone, the theme of my presentation CSS Grid Layout. I will tell you about the support of browsers for this specification, the differences between grid and flexbox and the main features of grid.
  40. 2)      2 years ago browsers have released updates, among which were updates for CSS. Now  you can use the CSS Grid Layout specification practically in all browsers without difficulty.
  41. 3)      Many people "Stop, I use flexbox, why do I need any more grids?". The question is more than appropriate. CSS Grid will not replace Flexbox. The first difference is that Flexbox only works in one dimension. It follows that we can only place flex elements along the main axis or along the transverse axis. We can't put flex items across multiple axes. CSS Grid allows us to work with the layout in two-dimensional space and align the content in both dimensions.
  42. 4)      Before  start working with CSS Grid need to understand the basic terms.
  43.  
  44. Grid container is a set of intersecting horizontal and vertical grid lines that divide the grid container space into grid areas where grid elements can be placed. Inside the grid container, there are two sets of grid lines: one defines the column axis, the other defines the row axis.
  45.  
  46. Grid lines are the horizontal and vertical separators of the grid container. These lines are on either side of a column or row.
  47.  
  48. Grid track is the space between two adjacent grid lines, vertical or horizontal.
  49.  
  50. Grid cell is the smallest indivisible unit of the grid container that can be referenced when positioning grid elements. It is formed at the intersection of grid row and grid column.
  51.  
  52. A Grid area is a space within a grid container in which one or more grid elements can be placed. This element can consist of one or more grid cells.
  53.  
  54. 5) We create a grid container by declaring display: grid or display: inline-grid on the element. Once we do this, all direct children of this element will be the elements of the mesh.
  55.  
  56. 6) We define rows and columns in our grid using the grid-template-columns and grid-template-rows properties. In the example, we create a grid with a column width of 200px. Each child element of the grid will be located in a separate grid cell.
  57.  
  58. 7) the Size of the tracks (bands) can be set using any length unit. The new FR length unit represents a fraction of the available space in the grid container. Auto and fr work the same in some cases, but fr is calculated after the block auto is calculated.
  59.  
  60. 8) the grid-template-areas Property determines the grid template referring to the names of the areas that are specified by the grid-area property.
  61. Repeating the name of the area causes the content to span these cells. A dot means an empty cell. The syntax itself provides a visualization of the grid structure.
  62.  
  63.  
  64. 9) Grid element can be a grid container. What is shown in the slide.
  65.  
  66. In addition to all the above, grid uses repeat(),minmax() to quickly create blocks and control block sizes. Grid is able to control the size and positioning of blocks relative to the Grid Line using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties. You can create gaps between blocks by using the grid-column-gap and grid-row-gap properties, or by using the reduced grid-gap property. Also useful are properties such as: justify-items/content, align-items/content,grid-auto-flow. Apply the justify/align-self properties to the child block.
  67.  
  68. 10) With the help of Grid it is possible to solve those problems with greater speed, convenience and originality that with the help of flexbox, float properties or tables. Like flexbox, Grid is another layout tool that has its advantages and disadvantages. No one will say, "Use the Grid here, but not here." If the implementation of the task on the Grid took twice as long as on flexbox, then such tasks do not need to be solved on the Grid, it is a matter of your experience.
  69.  

Share with your friends:

Print