CSS

CSS

Уроки CSS предназначены  на тех, кто знает HTML. Здесь Вы найдете уроки о том как сделать Ваши сайты адаптивными, стильными, красивыми и добавить эффекты анимации и переходов на Ваши страницы.

Здравствуйте! Я уже  писал о именованных линиях в сетке grid.  А в этом уроке мне хотелось бы рассмотреть  более детально  функцию repeat в  грид верстке. С помощью этой функции repeat вы  можете размножить столбцы и строки, которые вы создаете  как раз между именованными grid-линиями:

Давайте как всегда рассмотрим на примере.

Функция repeat в grid layout

Здравствуйте! В этом завершающем уроке по верстке на грид  мне хотелось бы рассмотреть создание простейшего макета страницы  с помощью Grid Layout. Наш макет будет состоять из шапки, футера или подвала, области контента, панели навигации и боковой панели или сайдбара. 

Давайте создадим вот такую страницу.

 

как создать макет страницы на Grid Layout

 

Здравствуйте! В этом уроке мы рассмотрим такое понятие как  области в Grid Layout. Эти области мы можем задавать c помощью вертикальных и горизонтальных линий, которые и будут задавать  границу этой области. Области могут включать несколько ячеек грида и особенно полезны при определении семантических отношений между элементами на странице.

Области грида

 

 

Здравствуйте! В этом уроке речь пойдет о  именованных линиях в  Grid Layout. Дело в том, что  в гридах  мы можем дать для каждой линии грида, название, указав это название в  квадратных скобках, а затем это можно использовать для  позиционироывания элементов по сетке грид. Давайте для примера, создадим  такую веб-страницу:

 

 
Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов. А именно свойства grid-auto-flow и order.
 

Свойство grid-auto-flow

В грид-контейнере  всегда  все элементы располагаются  горизонтально то есть в  ряд, а как тоько места в контейнере больше нет, то элементы переносятся соответственно на следующую строку. А вот с помощью свойства grid-auto-flow  можно изменить направление элементов. Собственно  свойство принимает 2 значения:
  • row:  это значение по умолчанию, элементы  могут располагаться горизонтально,  а как только  места уже не будет хватать  будут  переноситься на следующую строку
  • column: элементы будут  располагаться вертикально друг под другом,  а как только места в столбце не будет  хватать, то  элементы  будут переноситься  на следующий столбец

Порядок и направление элементов в сетке grid

 

Здравствуйте! На прошлом уроке мы с Вами рассмотрели позиционирование элементов в сетке грид, а на этом рассмотрим такую особенность, которая возникает при позиционировании элементов, как  наложение элементов в гриде.

Изменяя положение элементов вы легко можете накладывать элементы друг на друга, при этом будут  создаваться  слои из элементов. Например, определим следующий грид-контейнер:

Наложение элементов в Grid Layout

 

 

Здравствуйте! В этом уроке рассмотрим как позиционируются элементы в грид-сетке. По сути грид-сетка  представляет из себя  набор ячеек, которые получаются  на пересечении столбцов и строк. А сами строки и столбцы образуются с помощью grid-линий:

Позиционирование элементов в grid

 

 

Здравствуйте! Продолжаем  разбиратться с  версткой на гридах. Итак из прошлых уроков  вы уже знаете как создавать строки и столбцы в грид как задавать размеры грид-элементам, а из этого урока вы узнаете как задавать интервалы между строками и столбцами в грид-сетке.   Итак для  задания интервалов  между столбцами и строками используются свойства grid-column-gap и grid-row-gap.

Отступы между строк истолбцов gris layout

 

Здравствуйте! Продолжаем разбираться с версткой на основе Grid Layout. И в этом уроке в продолжении урока по строкам и столбцам grid разберем как задавать размеры строкам и столбцам в  сетке grid. Размеры можно задавть как фиксироваными, так и автоматическими. А сейчас давайте разбираться по порядку.

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

Здравствуйте! Продолжаем изучать новую технологию верстки с помощью Grid Layout. На прошлом уроке мы с вами разбирались со столбцами и строками в grid, а теперь поговорим о таком вопросе как повторение строк и столбцов и как все это можно оптимизировать. Дело в том, что когда у вас много строк и столбцов и вы хотите задать для них одинаковые размеры, то совсем необязательно прописывать все эти размеры. Достаточно написать один размер, а затем с помощью специальной функции repeat() повторить эти размеры. Итак  давайте разбираться.

Повторение строк и столбуов и функция grid

 

Страница 1 из 9