Grid html: Basic concepts of grid layout — CSS: Cascading Style Sheets

Leave a Comment / Html / By /

Содержание

Области грида в Grid Layout

Последнее обновление: 09.05.2017

В рамках грида мы можем определять области (grid area). Области определятся с помощью двух вертикальных и двух горизонтальных grid-линий, которые собственно и задают занимаемое областью пространство. В этом плане область не эквивалентна одной ячейке грида и может включать несколько ячеек. Области особенно полезны для определения семантических отношений между различными частями макета страницы.

Для определения областей у grid-контейнера применяется свойство grid-template-areas. Например, определим три области:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
		<style>
			*{
				box-sizing: border-box;
			}
			html, body{
				margin:0;
				padding:0;
			}
			.
 
 grid-container {
				height:100vh;
				display: grid;
				grid-template-areas: "header header"
									 "sidebar content"
									 "sidebar content";
				grid-template-columns: 150px 1fr;
				grid-template-rows: 100px 1fr 100px;
			}
			.header { grid-area: header; background-color: #bbb; }
			.sidebar { grid-area: sidebar; background-color: #ccc; }
			.content { grid-area: content; background-color: #eee; }
		</style>
    </head>
    <body>
		<div>
			<div></div>
			<div></div>
            <div></div>
		</div>
	</body>
</html>

Здесь у grid-контейнера определяется два столбца и три строки:


grid-template-columns: 150px 1fr;
grid-template-rows: 100px 1fr 100px;

То есть в итоге у нас будет в гриде 3 х 2 = 6 ячеек. Но в разметке страницы определено три элемента с одноименными областями: header, sidebar, content.

И свойство grid-template-areas как раз устанавливает, как эти области будут располагаться в ячейках грида:


grid-template-areas: 	"header header"
						"sidebar content"
						"sidebar content";

Выражение «header header» представляет первую строку и указывает, что область header занимает две ячейки подряд подряд.

Следующее выражение «sidebar content» указывает на вторую строку, где область sidebar занимает первую ячейку, а content — вторую ячейку. Третья строка повторяет вторую. То есть в итоге, если смотреть по ячейкам, то получится следующим образом:

Для установки области у элементов задается свойство grid-area:


.header { 
	grid-area: header; 	/* элемент с классом header помещается в область header*/
	background-color: #bbb; 
}

В итоге мы получим следующую страницу:

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width" />
        <title>Grid Layout в CSS3</title>
		<style>
			*{
				box-sizing: border-box;
			}
			html, body{
				margin:0;
				padding:0;
			}
			. grid-container {
				height:100vh;
				display: grid;
				grid-template-areas: "header header header header header"
									 ". . . . ."
									 "menu . content . sidebar"
									 ". . . . ."
									 "footer footer footer footer footer";
				grid-template-columns: 130px 5px 1fr 5px 130px;
				grid-template-rows: 90px 5px 1fr 5px 90px;
			}
			.header { grid-area: header; background-color: #bbb; }
			.menu { grid-area: menu; background-color: #ccc; }
			.sidebar { grid-area: sidebar; background-color: #ccc; }
			.content { grid-area: content; background-color: #eee; }
			.footer { grid-area: footer; background-color: #bbb; }
		</style>
    </head>
    <body>
		<div>
			<div></div>
            <div></div>
			<div></div>
			<div></div>
            <div></div>
		</div>
	</body>
</html>

Теперь грид содержит 5 строк и 5 столбцов, то есть в совокупности 25 ячеек, которые размещают 5 областей: header, menu, sidebar, content и footer.

Свойство grid-template-areas в стилях grid-контейнера опять же содержит определение того, как все эти области сопоставляются с ячейками. Например, элемент header должен занимать все пять ячеек первой строки: «header header header header header». Но определение второй строки, высота которой 5px, выглядит уже необычно: «. . . . .». Точка означает, что данная ячейка не будет принадлежать ни одной области и останется незаполненной. Если надо оставить 5 незаполненных ячеек, то указывается пять точек, между которыми ставятся пробелы. В итоге мы получим пять областей, между которыми будут располагаться незаполненные пространства:

НазадСодержаниеВперед

Обзор CSS Grid — технологии для упрощения разметки HTML-страниц

Появившись в 2011 году, технология CSS Grid продолжает вызывать все больше интереса. Эта статья — небольшое руководство по технологии с кратким описанием самых интересных возможностей и функций. Она будет полезна фронт-енд разработчикам, а также другим специалистам веб-разработки и дизайна.

Спецификация CSS Grid полностью меняет подход к разработке пользовательских интерфейсов, позволяя менять расположение grid-элементов, не затрагивая HTML.

Технология разрабатывалась более 5 лет и начала поддерживаться современными браузерами в середине 2017 года. CSS Grid упрощает описание разметки страницы, делая вёрстку HTML-страниц более адаптивной и простой.

Что такое Grid. Основные термины

Grid коренным образом меняет процесс создания адаптивных интерфейсов, включая:

  • фиксированные и гибкие размеры полос;
  • расположение элемента;
  • управление выравниванием;
  • управление перекрывающимся контентом.

Прежде чем приступать к работе с CSS Grid, нужно разобраться с основными терминами. На основе этих терминов построена вся спецификация. Каждый элемент тесно связан друг с другом и отвечает за определенную часть grid-контейнера.

Grid container (грид-контейнер) 

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

К Grid container применяется display: grid. Это прямой родитель для всех элементов сетки.

<div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div>

Элементы сетки — дочерние элементы (прямые потомки) контейнера.

Здесь item — это элемент сетки, но не sub-item.

<div class="container">
    <div class="item"></div> 
    <div class="item">
        <p class="sub-item"></p>
    </div>
<div class="item"></div>
</div>

Grid lines (грид-линии) — это горизонтальные и вертикальные разделители grid-контейнера. Эти линии находятся по обе стороны от столбца или строки.

Грид-линии формируют структуру контейнера. Автор может задать для элемента имя или числовой индекс, которые может использовать дальше в стилях. Нумерация начинается с единицы.

Элемент Grid line восприимчив к режиму написания, который используется на вашем ресурсе. Например, если вы используете арабский язык или любой другой язык, у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.

К грид-линиям можно привязывать грид-элементы — и по номерам, и по именам, как удобнее.

Грид-полосы — то, что ограничено парой соседних грид-линий. Вертикальные грид-полосы — это колонки грида (аналог столбцов таблицы), горизонтальные — ряды (аналог строк).

Grid cell — это наименьшая неделимая единица grid-контейнера, на которую можно ссылаться при позиционировании grid-элементов. Образуется на пересечении grid-строки (ряда) и grid-колонки.Аналог ячейки таблицы.

Grid area (грид-области) — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.

Грид-области — прямоугольники из M×N смежных грид-ячеек (1×1 и больше). Каждая грид-область ограничена двумя парами грид-линий (парой вертикальных и парой горизонтальных). В них и размещаются грид-элементы.

Грид-областям тоже можно задавать имена.

Grid track (грид-интервалы) — это пространство между двумя смежными grid-линиями, вертикальными или горизонтальными. Аналог border-spacing в таблице.

.container { 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Различие Grid и Flexbox

Flexbox позволяет управлять элементами в одномерном пространстве.

Grid же — это двухмерный массив (в котором используются колонки и строки).

Это дает нам массу преимуществ по адаптивной трансформации и перестроению.

.grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 100px auto 100px;
	}

Сокращенная запись (rows / column).

.grid {
		grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
	}

Строки и расположение элементов

В CSS Grid можно размещать элементы, используя номера строк. Есть возможность именовать строки, используя grid-area, а также возможность привязки к области Grid.

.wrapper {
		display: grid;
		grid-template-areas: 
		"a a b"
		"a a b"
		"c d d";
	}
	.item1 {grid-area: a;}
	.item2 {grid-area: b;}
	.item2 {grid-area: c;}
	.item2 {grid-area: d;}

Размеры полос (треков)

Сетку в Grid можно создавать с фиксированными размерами («px»), относительными размерами («em», «rem»), а также задавая гибкие размеры — ’%’ или ’fr’ (fraction). Новая единица рассчитывается самостоятельно.

Fr (fraction) не измеряется в привычных единицах, таких как «px», «em», «rem», etc, а рассчитывается самостоятельно.

Калькуляция в «fr»

Например, если доступное место составляет 900 px, и при этом первому элементу достается одна доля, а второму — две, то первый получает 1/3, а второй — 2/3 от 900 px. 

<div class="grid">
		<div class="box item1">Item 1</div>
		<div class="box item2">Item 2</div>
		<div class="box item3">Item 3</div>
		<div class="box item4">Item 4</div>
	</div>

.grid {
		display: grid;
		grid-gap:20px;
		grid-template: 100px auto 100px /1fr 80px 3fr 20%;;
	}

Оси элементов в Grid

При работе с Grid у нас есть две оси для выравнивания элементов.

Ось column (столбца)

Когда мы используем свойства align-self и align-items, мы меняем выравнивание элемента в области сетки, которую поместили. Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

Ось row (строки)

Элементы управления justify-items и justify-self на оси row/inline:

<div class="grid">
	  <div class="box item1">Item 1</div>
	  <div class="box item2">Item 2</div>
	  <div class="box item3">Item 3</div>
	  <div class="box item4">Item 4</div>
	</div>

. grid {
	  display: grid;
	  grid-gap:20px;
	  grid-template: 100px auto 100px / 1fr 1fr 1fr 1fr;
	  align-items: stretch;
	}

.item1 {
	  background: #f00;
	  align-self: end;
	}
	.item2 {
	  background: #f0f;
	  align-self: flex-start;
	}
	.item3 {
	  background: #008000;
	  align-self: end;
	}
	.item4 {
	  background: #000;
	}

Препроцессоры

Препроцессоры Sass и Less поддерживают работу с Grid. Также с CSS Grid работают Stylus и PostCSS.

Софт

Google Chrome и Mozilla подсвечивают гриды расширением Firebug. Также для Chrome есть расширение Gridman — CSS Grid inspector.

Support

CSS-гриды уже есть в Safari 10.3, Firefox 61 и Chrome 63.

В IE10 & IE11 используется префикс «-ms-» для определения свойств Grid. К сожалению, эти браузеры поддерживают только одну из самых ранних ограниченных спецификаций Grid Layout 2011 года.

Современная версия очень отличается от предшествующих.

В поддержке браузерами IE:

  • Нет автоматического размещения. Необходимо поместить каждый элемент в сетку, используя линейное позиционирование.
  • Невозможна реализация свойств:
grid-gap
		grid-template
		grid-template-areas
		grid-auto-columns
		grid-auto-rows
		grid-auto-flow
		grid-row-end
		grid-column-end
		grid-area
		grid-row-gap
		grid-column-gap
		grid-gap
		justify-self

Это не полный список всех изменений спецификации.

Имеет ли смысл использовать Grid Layout в IE вообще?

Если вы используете Grid, позиционируя элементы средствами CSS вместо использования автоматического размещения, то сетка в Internet Explorer 10, может оказаться очень полезной.

Пример базовой сетки Grid для IE
<div class="grid">
	  <div class="box item1">Item 1</div>
	  <div class="box item2">Item 2</div>
	  <div class="box item3">Item 3</div>
	  <div class="box item4">Item 4</div>
	</div>

.grid {
		display: -ms-grid;
		-ms-grid-columns: 1fr 1fr 1fr 1fr;
		-ms-grid-rows: 4fr;
	}
	. item1 {
		-ms-grid-column: 1;
		-ms-grid-row: 1;
	}
	.item2 {
		-ms-grid-column: 2;
		-ms-grid-row: 1;
	}
	.item3 {
		-ms-grid-column: 3;
		-ms-grid-row: 1;
	}
	.item4 {
		-ms-grid-column: 4;
		-ms-grid-row: 1;
	}

Выводы

CSS Grid открывает перед разработчиками мощные возможности, но полноценно реализовать их пока мешает недостаточная поддержка браузеров IE10 и 11 (поддерживаются частично свойства через вендорные префиксы).

Преимущества
  • CSS Grid сделает HTML более чистым (разметка проще, отсутствие множества классов и дополнительных тегов).
  • Простота макета страницы.
  • Гибкость и адаптация при работе с элементами.
  • Layout можно изменять, не затрагивая разметку.
  • Возможность построения блоков в двумерном пространстве (layout учитывает горизонтальное и вертикальное пространство одновременно).
  • Нет ограничений по элементам построения сетки макета.
  • Отлично подходит для создания больших макетов и управления ими.
  • Возможно создавать сайты с динамическим контентом.
  • Медиазапросы не требуются, чтобы адаптироваться к свободному пространству.
Недостатки
  • Частичная поддержка в браузерах IE10 и IE11.

Grid остается революционной областью для веб. Его возможности в сочетании с другими инструментами позволят создавать более интересные и гибкие раскладки без лишних стилей, не думая про отдельные фреймворки.

И напоследок, эту статью я также опубликовал на английском в нашем блоге.


Читайте также: Обзор CSS Flexbox layout — технологии для расположения блоков на HTML-странице

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

Теми: frontend, HTML, tech, Web

Шаблон CSS Grid в действии

С тех пор, как CSS Grid стал поддерживаться в основных браузерах еще в марте 2017 года (почти три года назад), я начал использовать его в своих личных и клиентских проектах, конечно, с подходящим запасным вариантом для не поддерживающих браузеров.  Я также сделал инструмент под названием grid-to-flex, который генерирует запасной вариант flexbox для сетки.

Обычный способ добавления сетки

Рассмотрим следующий макет дизайна:

Обычно я устанавливаю grid-column для каждого элемента заголовка, боковой панели, основного и нижнего колонтитула следующим образом:

.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 1rem;
}
header {
  grid-column: 1 / 3;
}
footer {
  grid-column: 1 / 3;
}

Это прекрасно работает, если структура сайта или макет, над которым вы работаете, никогда не изменится. Тем не менее, это не совсем возможно в Интернете. Сеть является гибкой, и, следовательно, макеты, которые мы создаем, должны быть такими.

Например, мы передумали и решили сделать интервал боковой панели до конца страницы, а нижний колонтитул должен иметь такую ​​же ширину, что и основной элемент. Для этого нам нужно изменить значение grid-column для основного, стороннего и нижнего колонтитулов.

И CSS:

header {
  grid-column: 1 / 3;
}
main {
  grid-column: 2 / 3;
}
aside {
  grid-row: 2 / 4;
}
footer {
  grid-column: 2 / 3;
}

Несмотря на то, что я давно работаю с CSS Grid, у нас есть отличные инструменты, которые показывают нам номера линий сетки, такие как Firefox DevTools ниже:

Мне все еще трудно изменить или запомнить количество столбцов и строк для каждого редактирования макета. Может быть, есть лучший визуальный способ для этого, не быть пойманным в цифрах каждый раз, когда требуется редактирование? Да, есть.

демонстрация

Представление областей шаблона сетки

Вместо того, чтобы иметь дело с числами столбцов и строк, есть лучший способ использования grid-template-areas . Просто он визуально отображает столбцы и строки сетки.

Во-первых, я хочу объяснить концепцию областей в ее простом случае.

.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas: none | <string>+;
    grid-gap: 1rem;
}

Возможное значение для grid-template-areas — несколько строк, сгруппированных с кавычками.  Каждая ячейка в строке представляет столбец, а каждая строка представляет строку в сетке. Мы повторим приведенный выше пример, чтобы понять, как это работает.  

.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "sidebar footer";
  grid-gap: 1rem;
}
header {
  grid-area: header;
}
main {
  grid-column: main;
}
aside {
  grid-row: sidebar;
}
footer {
  grid-column: footer;
}

Чтобы понять значение grid-template-areas , см. иллюстрацию об этом ниже.

Обратите внимание, что представление значения похоже на дизайн макета. Каждый цвет представляет определенный компонент / элемент дизайна.

Так как у нас есть два столбца, 200px и 1fr значение grid-template-areas должно быть приведено в соответствие с ними. Когда я написал «header header», это означает, что ширина заголовка будет 200px + 1fr , которая фактически равна 100% ширине родительского элемента.

демонстрация

Пустые районы

Иногда мы хотим, чтобы ячейка в сетке была пустой. Для этого необходимо добавить «точку» внутри определения grid-template-areas .

.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas: 
        ". header"
        "sidebar main"
        "sidebar footer";
  grid-gap: 1rem;
}

Помещенная точка означает, что эта ячейка пуста, а голова должна быть помещена во второй столбец. Результат как ниже:

демонстрация

Варианты использования и примеры

Во время обучения я пытался придумать варианты использования, grid-template-areas которые могут быть полезны. Я надеюсь, что они вам понравятся, и, пожалуйста, не стесняйтесь делиться своими идеями или предложениями, если я что-то пропустил.

1. Избранная статья

У нас есть раздел с избранной статьей, который охватывает высоту двух строк. Для этого нам понадобятся три столбца и две строки.  Вот структура HTML:

<main>
    <div></div>
    <div></div>
    <div></div>
</main>

И основной CSS:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.25rem;
}

С учетом вышесказанного у нас будет следующая сетка:

Вот как я визуально представляю о grid-template-areas для этого макета.

Теперь у нас будет две строки для grid-template-areas . Смотрите ниже CSS:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
       "featured item-1 item-1"
       "featured item-2 item-2";
    grid-gap: 1.25rem;
}
.item.featured {
  grid-area: featured;
}
.item-2 {
  grid-area: item-1;
}
.item-3 {
  grid-area: item-2;
}

Разве это не легко и просто, вместо того, чтобы иметь дело с номерами столбцов и строк? 

2. Адаптивный дизайн и сетка.

На основе предыдущего примера мы увидим, как справиться с этим при меньших размерах экрана.  Поскольку каждый элемент grid-area уже применяется к нему, изменение будет только для значения grid-templates-areas .

В наименьшем размере элементы должны располагаться друг над другом. Затем, если ширина области просмотра больше или равна 600px , будет запущен макет с 3 столбцами. Наконец, если ширина области просмотра больше или равна 900px , будет активирована обычная компоновка.

Вот как я добавил области сетки для оболочки:

/* Stacked Layout */
main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 
            "featured featured featured" 
            "item-1 item-1 item-1" 
            "item-2 item-2 item-2";
  grid-gap: 1.25rem;
}
/* 3-col Layout */
@media (min-width: 600px) {
  main {
    grid-template-areas: 
            "featured item-1 item-2" 
            "featured item-1 item-2";
  }
}
/* Featured Layout */
@media (min-width: 900px) {
  main {
    grid-template-areas: 
            "featured item-1 item-1" 
            "featured item-2 item-2";
  }
}

Элементы формы

Хорошим вариантом использования областей сетки являются элементы формы.  Допустим, мы хотим, чтобы в форме отображался левый макет для размера мобильного устройства, а правый — для размера рабочего стола.

Для этого я сделаю обертку входной группы в качестве обёртки сетки.

<form>
    <p>
      <label for="">Full Name</label>
      <input type="email" name="">
    </p>
    <!-- Other form elements -->
    <p>
      <button>Sign up</button>
    </p>
</form>
.input-group {
  display: grid;
  grid-template-columns: 0.7fr 2fr;
  grid-template-areas: "col-1 col-1" "col-2 col-2";
  margin-bottom: 1rem;
  @media (min-width: 700px) {
    grid-template-areas: "col-1 col-2";
  }
}
label {
  grid-area: col-1;
}
input {
  grid-area: col-2;
}
.c-button {
  grid-area: col-2;
  justify-self: start;
}

Исходя из вышеизложенного, вот как должна выглядеть форма в больших окнах просмотра.

Системы повторного использования и проектирования

Я думал о расширении использования областей сетки, чтобы установить руководящие принципы для дизайн-проекта.  Например, раздел с различными вариантами макета.

1. Редакционный макет

Этот редакционный макет является частью системы дизайна. Команда согласилась поработать над двумя вариантами этого макета, добавив или удалив класс CSS. Давайте посмотрим, как работать с первым вариантом с областями сетки.

<div>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>
.c-newspaper {
  display: grid;
  grid-template-columns: 0.2fr 0.6fr 0.2fr;
  grid-template-areas: 
                    "item-1 featured item-2"
                    "item-3 featured item-4"
                    "item-5 item-6 item-7";
  grid-gap: 1rem;
}
.c-article--1 {
    grid-area: item-1;
}
.c-article--2 {
    grid-area: item-2;
}
/*..And so on for other elements. . each one has a grid-area..*/
.c-article--7 {
    grid-area: item-7;
}
.c-article--featured {
    grid-area: featured;
}

Чтобы сделать это более понятным, я представлю область сетки на рисунке ниже.

И для второго варианта я изменил области сетки так, как показано ниже:

.c-newspaper.variation-1 {
    grid-template-areas: 
                    "featured featured item-3" 
                    "item-1 item-2 item-4" 
                    "item-5 item-6 item-7";
}

Представьте, распространяется ли эта концепция на различные компоненты и разделы в системе проектирования. В результате будет легко использовать и изменять кодовую базу CSS. Более того, любой, кто использует эту систему проектирования, может создать собственный макет, просто играя со значением grid-template-areas .

Прогрессивное улучшение

Структура HTML для приведенного выше примера работает, только если поддерживается CSS Grid. Как мы можем использовать flexbox для восстановления и улучшить с помощью Grid? Давайте исследуем это.

Сначала я обернул статьи в три столбца, как показано ниже:

<div>
  <div>
        <article></article>
        <article></article>
        <article></article>
  </div>
  <div>
        <article></article>
        <article></article>
        <article></article>
  </div>
  <div>
        <article></article>
        <article></article>
  </div>
</div>

Как только мы получим вышеизложенное, мы можем использовать flexbox для создания макета с тремя столбцами в соответствии с оригинальным дизайном.

.c-newspaper {
  display: flex;
  flex-wrap: wrap;
}
.c-newspaper__column--1 {
  flex: 0 0 20%; /* First Column Takes 20% width */
}
.c-newspaper__column--2 {
  flex: 0 0 60%; /* Second Column Takes 60% width */
}
.c-newspaper__column--3 {
  flex: 0 0 20%; /* Third Column Takes 20% width */
}
.c-newspaper__item {
  margin-bottom: 1rem; /* Spacing below each article */
}

При этом у нас есть макет с 3 колонками, который работает для браузера, который не поддерживает CSS Grid.  Следующим шагом является улучшение на основе этого и добавление кода сетки CSS.

Позиционирование каждого элемента сетки по отдельности

Теперь, когда мы завернули статьи в контейнеры из трех столбцов, как расположить каждый элемент сетки по отдельности? Нам нужен способ имитировать идею скрыть контейнеры столбцов и хранить все внутри них. CSS display: contents на помощь!

Мне нравится это определение в CSS Tricks :

Волшебное новое отображаемое значение, которое по существу делает контейнер исчезающим, делая дочерние элементы дочерними для элемента на следующем уровне в DOM.

@supports (display: contents) {
    .c-newspaper__column {
        display: contents; /* Each column has disappeared */
    }
    .c-newspaper {
        display: grid;
        grid-template-columns: 0.2fr 0.6fr 0.2fr;
        grid-template-areas: 
                    "item-1 featured item-2"
                    "item-3 featured item-4"
                    "item-5 item-6 item-7";
        grid-gap: 1rem;
    }
}

Чтобы сделать это более понятным, я сделал ниже GIF, который показывает эффект применения display: contents к каждому из контейнеров . c-newspaper__column .

Медиа компонент

Медиа компонент является хорошим примером использования областей сетки. Допустим, мы хотим переключить размещение медиа и контента. Сетка идеально подходит для этого.

.c-media {
  display: grid;
  grid-template-areas: "thumb content";
  grid-gap: 1rem;
}
.c-media.flipped {
  grid-template-areas: "content thumb";
}
.c-media__thumb {
  grid-area: thumb;
}
.c-media__content {
  grid-area: content;
}

Отладочная сетка

Мой любимый браузер для работы с сеткой CSS — Firefox. Его DevTools имеет несколько отличных опций для отладки CSS. Например, он показывает имена областей сетки, и даже показывает небольшое представление значения grid-template-areas в правом нижнем углу.

Свойство шаблона сетки CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Создайте сетку из трех столбцов, где первый ряд имеет высоту 150 пикселей:

. grid-container {
  display: grid;
  шаблон сетки: 150 пикселей / авто авто авто;
}

Попробуйте сами »

Определение и использование

Свойство grid-template является сокращенным свойством для следующие свойства:

  • строки шаблона сетки
  • сетка-шаблон-столбцы
  • области шаблона сетки

Показать демо ❯

Значение по умолчанию: нет нет нет
Унаследовано: нет
Анимация: да. Читать о анимированном Попытайся
Версия: Модуль компоновки сетки CSS, уровень 1
Синтаксис JavaScript: объект .style.gridTemplate=»250px / auto auto» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
шаблон сетки 57 16 52 10 44

Синтаксис CSS

grid-template: none| сетка-шаблон-строки / сетка-шаблон-столбцы | grid-template-areas |initial|inherit;

Значения свойств

Значение Описание Демо
нет Значение по умолчанию. Нет определенного размера столбцов или строк
строки шаблона сетки / столбцы шаблона сетки Задает размеры столбцов и строк Демонстрация ❯
области сетки-шаблона Задает макет сетки с использованием именованных элементов Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальных
наследовать Наследует это свойство от родительского элемента. Читать о наследовать

Другие примеры

Пример

Укажите две строки, где «item1» охватывает первые два столбца в первых двух строки (в сетке из пяти столбцов):

.item1 {
 grid-area: myArea;
}
.grid-container {
  display: grid;
  шаблон сетки:
‘моя область моя область . . .’
    ‘моя область моя область . . .’;
}

Попробуйте сами »

Пример

Назовите все элементы и создайте готовый к использованию шаблон веб-страницы:

.item1 { область сетки: заголовок; }
.item2 { область сетки: меню; }
.item3 { область сетки: главный; }
.item4 { область сетки: Правильно; }
.item5 { область сетки: нижний колонтитул; }

. grid-container {
  display: grid;
  шаблон сетки:
‘заголовок заголовка заголовка заголовка заголовка заголовка’
‘меню главное главное главное право’
    ‘нижний колонтитул меню нижний колонтитул нижний колонтитул’;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: CSS Grid Item

Справочник по CSS: свойство grid-area

Справочник по CSS: свойство grid-template-rows

Справочник по CSS: сетка -template-columns property

Справочник по CSS: свойство grid-template-areas

❮ Назад Полное руководство по CSS Следующий ❯


NEW

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Элемент сетки CSS

❮ Предыдущий Следующий ❯

Попробуй сам »

Дочерние элементы (элементы)

Контейнер сетки содержит элементы сетки .

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

Свойство grid-column:

Свойство grid-column определяет, на каком столбец (столбцы) для размещения элемента.

Вы определяете, где элемент начнется и где элемент закончится.

Примечание: Свойство grid-column является сокращенным свойством для свойства grid-column-start и grid-column-end .

Чтобы разместить элемент, вы можете обратиться к номерам строк или использовать ключевое слово «промежуток», чтобы определить, сколько столбцов будет охватывать элемент.

Пример

Сделать так, чтобы «item1» начинался в столбце 1 и заканчивался перед столбцом 5:

.элемент1 {
сетка-столбец: 1/5;
}

Попробуй сам »

Пример

Заставить «item1» начинаться со столбца 1 и охватывать 3 столбца:

.item1 {
сетка-столбец: 1 / пролет 3;
}

Попробуй сам »

Пример

Сделать так, чтобы «item2» начинался со столбца 2 и занимал 3 столбца:

.item2 {
сетка-столбец: 2 / пролет 3;
}

Попробуй сам »

Свойство строки сетки:

Свойство grid-row определяет, в какой строке разместить предмет.

Вы определяете, где элемент начнется и где элемент закончится.

Примечание: Свойство grid-row является сокращенным свойством для свойства grid-row-start и grid-row-end .

Чтобы разместить элемент, вы можете обратиться к номерам строк или использовать ключевое слово «промежуток», чтобы определить, сколько строк будет охватывать элемент:

Пример

Сделать так, чтобы «item1» начинался в строке 1 и заканчивался в строке 4:

.item1 {
сетка-ряд: 1/4;
}

Попробуй сам »

Пример

Сделать так, чтобы «item1» начинался с первой строки и занимал 2 строки:

.item1 {
сетка-ряд: 1/промежуток 2;
}

Попробуй сам »

Свойство grid-area

Свойство grid-area можно использовать как сокращенное свойство для сетка-ряд-начало , grid-column-start , grid-row-end и свойства grid-column-end .

Пример

Сделать так, чтобы «item8» начинался в строке 1 и строке столбца 2 и заканчивался в строке 5 и строке столбца 6:

.item8 {
площадь сетки: 1/2/5/6;
}

Попробуй сам »

Пример

Сделать так, чтобы «item8» начинался со строки строки 2 и строки столбца 1 и занимал 2 строки и 3 столбца:

. item8 {
площадь сетки: 2 / 1 / пролет 2 / пролет 3;
}

Попробуй сам »

Именование элементов сетки

Свойство grid-area также можно использовать для присвоения имен элементам сетки.

Main

Right

На именованные элементы сетки можно ссылаться с помощью свойства grid-template-areas контейнера сетки.

Пример

Item1 получает имя «myArea» и охватывает все пять столбцов в сетке из пяти столбцов:

.item1 {
  область сетки: моя территория;
}
.grid-container {
  grid-template-areas: ‘myArea myArea моя область моя область моя область’;
}

Попробуй сам »

Каждая строка определяется апострофами (‘ ‘)

Столбцы в каждой строке определяются внутри апострофов, разделенных символом пространство.

Примечание: Знак точки представляет элемент сетки без имени.

Пример

Пусть «myArea» охватывает два столбца в сетке из пяти столбцов (знаки точки представляют предметы без имени):

. item1 {
  область сетки: моя территория;
}
.grid-container {
  grid-template-areas: ‘myArea myArea . . .’;
}

Попробуй сам »

Чтобы определить две строки, определите столбец второй строки внутри другого набора апострофов:

Пример

Сделать «item1» охватом двух столбцов и двух строк:

.grid-container {
  grid-template- области: ‘myArea myArea . . .’ ‘моя область моя область . . .’;
}

Попробуй сам »

Пример

Назовите все элементы и создайте готовый к использованию шаблон веб-страницы:

.item1 {область сетки: заголовок; }
.item2 { область сетки: меню; }
.элемент3 { область сетки: основная; }
.item4 { область сетки: справа; }
.item5 {область сетки: нижний колонтитул; }

.grid-container {
  области шаблона сетки:
‘заголовок заголовка заголовок заголовка заголовка’
    ‘главное меню main main right’
    ‘menu footer footer footer footer нижний колонтитул;
}

Попробуй сам »

Порядок элементов

Сетка позволяет нам размещать элементы в любом месте.

Первый элемент в HTML-коде не обязательно должен отображаться как первый элемент в сетке.

Пример

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { область сетки: 2/3/3/4; }
.item3 { область сетки: 1 / 1 / 2 / 2; }
.item4 { область сетки: 1/2/2/3; }
.item5 {площадь сетки: 2/1/3/2; }
.item6 {область сетки: 2/2/3/3; }

Попробуй сам »

Вы можете изменить порядок для определенных размеров экрана с помощью медиа-запросов:

Пример

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / размах 3/2/4; }
  .item2 { область сетки: 3 / 3 / 4 / 4; }
.item3 {площадь сетки: 2/1/3/2; }
  .item4 { область сетки: 2 / 2 / пролет 2/3; }
  .item5 { область сетки: 3 / 1 / 4 / 2; }
  .item6 {площадь сетки: 2/3/3/4; }
}

Попробуй сам »

❮ Предыдущий Далее ❯


Smart Grid: Smart Grid

Возможно, вы слышали об Smart Grid в новостях или от поставщика энергии. Но нет все знают, что такое сеть, не говоря уже об Smart Grid. «Сетка» относится к электрическому сеть, сеть линий электропередачи, подстанции, трансформаторы и многое другое, которые доставляют электроэнергию от электростанции к вашему дому или бизнесу. Это то, к чему вы подключаетесь, когда включаете выключатель света или включаете компьютер. Наш действующая электрическая сеть была построена в 189 г.0 с и совершенствовались по мере развития технологий в течение каждого десятилетия. Сегодня он насчитывает более 9200 электроагрегатов с присоединенной мощностью более 1 млн МВт до более чем 300 000 миль трансмиссии линии. Хотя электрическая сеть считается чудом инженерной мысли, мы растягиваем ее лоскутный характер в меру своих возможностей. Чтобы двигаться вперед, нам нужна электросеть нового типа, одна который построен снизу вверх, чтобы справиться с поток цифрового и компьютеризированного оборудования и технологий, зависящих от него, — и один которые могут автоматизировать и управлять растущей сложностью и потребностями в электроэнергии в 21-м Века.

Что делает сеть «умной»?

Короче говоря, цифровая технология, обеспечивающая двустороннюю связь между коммунальным предприятием и своих клиентов, а датчики вдоль линий электропередачи — это то, что делает сеть «умной». Нравиться Интернет, Smart Grid будет состоять из средства управления, компьютеры, автоматизация и новые технологии и оборудование, работающие вместе, но в В этом случае эти технологии будут работать с электрической сетью, чтобы в цифровом виде реагировать на наши быстро меняющийся спрос на электроэнергию.

Что делает интеллектуальная сеть?

Smart Grid представляет собой беспрецедентную возможность вывести энергетическую отрасль на новый уровень эра надежности, доступности и эффективности, которая будет способствовать нашим экономическим и состояние окружающей среды. В переходный период он будет иметь решающее значение для проведения тестирования, усовершенствования технологий, обучения потребителей, разработки стандартов и правил, а также обмен информацией между проектами для обеспечения того, чтобы преимущества, которые мы ожидаем от Smart Grid, становятся реальность. Преимущества, связанные с Smart Grid, включают в себя:

  • Более эффективная передача электроэнергии
  • Более быстрое восстановление электроснабжения после перебоев в электроснабжении
  • Снижение эксплуатационных и управленческих расходов на коммунальные услуги и, в конечном счете, снижение затрат на электроэнергию для потребителей
  • Снижение пикового спроса, что также поможет снизить тарифы на электроэнергию
  • Расширение интеграции крупномасштабных систем возобновляемой энергии
  • Улучшение интеграции систем производства электроэнергии между заказчиком и владельцем, включая возобновляемые источники энергии. энергетические системы
  • Повышенная безопасность

Сегодня перебои в подаче электроэнергии, такие как отключение электроэнергии, могут иметь эффект домино — серию сбои, которые могут повлиять на банковские операции, связь, трафик и безопасность. Это особое угроза зимой, когда домовладельцев можно оставить без тепла. Более интеллектуальная сеть повысит устойчивость нашей системы электроснабжения и сделает ее лучше подготовлены к чрезвычайным ситуациям, таким как сильные штормы, землетрясения, крупные солнечные вспышки, и теракты. Из-за своего двустороннего интерактивные возможности, Smart Grid позволит автоматически изменять маршрут при отказе оборудования или случаются отключения. Это сведет к минимуму простои и сведет к минимуму последствия, когда они все же произойдут. Когда происходит отключение электроэнергии, технологии Smart Grid обнаружит и изолирует сбои, сдерживая их до того, как они перерастут в крупномасштабные отключения. Новые технологии также помогут обеспечить быстрое возобновление восстановления электроэнергии и стратегически после чрезвычайной ситуации — маршрутизация например, сначала подается электричество аварийным службам. Кроме того, Smart Grid займет большее преимущество собственных генераторов электроэнергии для производства электроэнергии, когда она недоступна от коммунальных услуг. Объединив эти «распределенные ресурсов поколения, община могла бы сохранить свой медицинский центр, полицейский участок, дорожный освещение, телефонная система и продуктовый магазин, работающий во время чрезвычайных ситуаций. Кроме того, Смарт Сеть — это способ справиться со стареющей энергией инфраструктура, которую необходимо модернизировать или заменить. Это способ решения проблемы энергоэффективности, повысить осведомленность потребителей о связи между потреблением электроэнергии и Окружающая среда. И это способ увеличить национальной безопасности в нашу энергетическую систему, опираясь на большее количество доморощенных электричество, которое более устойчиво к стихийным бедствиям и нападениям.

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

Smart Grid — это не только утилиты и технологии; речь идет о том, чтобы дать вам информация и инструменты, необходимые вам для принятия решений относительно использования энергии. Если вы уже управляете такие действия, как личное банковское обслуживание из вашего дома компьютера, представьте, что вы управляете электричеством аналогичным образом. Более интеллектуальная сеть позволит беспрецедентный уровень участия потребителей. Например, вам больше не придется ждать ваш ежемесячный отчет, чтобы узнать, сколько электричество, которое вы используете. С более интеллектуальной сетью вы можете получить четкое и своевременное представление об этом. «Умная счетчики», и другие механизмы, позволит вам увидеть, сколько электроэнергии вы используете, когда вы используете она и ее стоимость. В сочетании с режимом реального времени цены, это позволит вам сэкономить деньги, используя меньше энергии, когда электричество наиболее дорогой. Хотя потенциальные преимущества Smart Grid обычно обсуждаются с точки зрения цели экономики, национальной безопасности и возобновляемых источников энергии, Smart Grid может помочь вам сэкономить деньги, помогая вам управлять использование электроэнергии и выбрать лучшее время для покупки электроэнергии. И вы можете сэкономить еще больше генерируя собственную силу.

Построение и тестирование Smart Grid

Smart Grid будет состоять из миллионов частей и частей — элементов управления, компьютеров, источников питания линии, новые технологии и оборудование.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *