Выпуск №9 (Июнь)
XXXVІI Международная научно-практическая конференция: "Актуальные проблемы современной науки", 28.12.2018 (Совместная конференция с Международным научным центром)

XXXVI Международная научно-практическая конференция: "Актуальные проблемы современной науки", 29.11.2018 (Совместная конференция с Международным научным центром)

XIII Международная научно-практическая конференция «Актуальные проблемы экономики и финансов», 31.10.2018 (Совместная конференция с Финансово-экономическим научным советом)

XXXV Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.10.2018 (Совместная конференция с Международным научным центром)

XXXIV Международная научно-практическая конференция: "Актуальные проблемы современной науки", 28.09.2018 (Совместная конференция с Международным научным центром)

ХXXIII Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.08.2018 (Совместная конференция с Международным научным центром)

ХXXII Международная научно-практическая конференция: "Актуальные проблемы современной науки", 31.07.2018 (Совместная конференция с Международным научным центром)

XII Международная научно-практическая конференция «Актуальные проблемы экономики и финансов», 31.07.2018 (Совместная конференция с Финансово-экономическим научным советом)

ХXXI Международная научно-практическая конференция: "Актуальные проблемы современной науки", 29.06.2018 (Совместная конференция с Международным научным центром)

ХІ Международная научно-практическая конференция «Глобальные проблемы экономики и финансов», 31.05.2018 (Совместная конференция с Финансово-экономическим научным советом)

XXХ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.05.2018 (Совместная конференция с Международным научным центром)

XXIХ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.04.2018 (Совместная конференция с Международным научным центром)

ХХVIІІ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 29.03.2018 (Совместная конференция с Международным научным центром)

ІІІ МНПК "Экономика, финансы и управление в XXI веке: анализ тенденций и перспективы развития", 19-22.03.2018 (Совместная конференция с Финансово-экономическим научным советом)

X Международная научно-практическая конференция «Глобальные проблемы экономики и финансов», 28.02.2018 (Совместная конференция с Финансово-экономическим научным советом)

ХХVІІ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 27.02.2018 (Совместная конференция с Международным научным центром)

ХХVІ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.01.2018 (Совместная конференция с Международным научным центром)

XІІ Международная научно-практическая конференция «Научный диспут: вопросы экономики и финансов», 29.12.2017 (Совместная конференция с Финансово-экономическим научным советом)

ХХV Международная научно-практическая конференция: "Актуальные проблемы современной науки", 28.12.2017 (Совместная конференция с Международным научным центром)

ХХІV Международная научно-практическая конференция: "Актуальные проблемы современной науки", 29.11.2017 (Совместная конференция с Международным научным центром)

XI Международная научно-практическая конференция «Актуальные проблемы экономики и финансов», 31.10.2017 (Совместная конференция с Финансово-экономическим научным советом)

XІ Международная научно-практическая конференция «Научный диспут: вопросы экономики и финансов», 29.09.2017 (Совместная конференция с Финансово-экономическим научным советом)

ХХIІІ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 28.09.2017 (Совместная конференция с Международным научным центром)

X Международная научно-практическая конференция «Актуальные проблемы экономики и финансов», 31.07.2017 (Совместная конференция с Финансово-экономическим научным советом)

ХXII Международная научно-практическая конференция: "Актуальные проблемы современной науки", 28.07.2017 (Совместная конференция с Международным научным центром)

ХXI Международная научно-практическая конференция: "Актуальные проблемы современной науки", 29.06.2017 (Совместная конференция с Международным научным центром)

IX Международная научно-практическая конференция «Глобальные проблемы экономики и финансов», 31.05.2017 (Совместная конференция с Финансово-экономическим научным советом)

ХX Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.05.2017 (Совместная конференция с Международным научным центром)

"Тенденции развития национальных экономик: экономическое и правовое измерение" 18-19.05.2017 (Совместная конференция с Финансово-экономическим научным советом и ККИБиП)

ХIX Международная научно-практическая конференция: "Актуальные проблемы современной науки", 27.04.2017 (Совместная конференция с Международным научным центром)

IX Международная научно-практическая конференция "Научный диспут: вопросы экономики и финансов", 31.03.2017 (Совместная конференция с Финансово-экономическим научным советом)

ХVIII Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.03.2017 (Совместная конференция с Международным научным центром)

МНПК "Экономика, финансы и управление в XXI веке: анализ тенденций и перспективы развития", 20–23.03.2017 (Совместная конференция с Финансово-экономическим научным советом)

VIII Международная научно-практическая конференция "Глобальные проблемы экономики и финансов", 28.02.2017 (Совместная конференция с Финансово-экономическим научным советом)

ХVII Международная научно-практическая конференция: "Актуальные проблемы современной науки", 27.02.2017 (Совместная конференция с Международным научным центром)

VIII Международная научно-практическая конференция "Актуальные проблемы экономики и финансов", 31.01.2017 (Совместная конференция с Финансово-экономическим научным советом)

ХVI Международная научно-практическая конференция: "Актуальные проблемы современной науки", 30.01.2017 (Совместная конференция с Международным научным центром)

ХV Международная научно-практическая конференция: "Актуальные проблемы современной науки", 28.12.2016 (Совместная конференция с Международным научным центром)

VIII Международная научно-практическая конференция "Научный диспут: вопросы экономики и финансов", 28.12.2016 (Совместная конференция с Финансово-экономическим научным советом)

VII Международная научно-практическая конференция "Глобальные проблемы экономики и финансов", 30.11.2016 (Совместная конференция с Финансово-экономическим научным советом)

ХІV Международная научно-практическая конференция: "Актуальные проблемы современной науки", 29.11.2016 (Совместная конференция с Международным научным центром)

VII Международная научно-практическая конференция "Актуальные проблемы экономики и финансов", 31.10.2016 (Совместная конференция с Финансово-экономическим научным советом)

ХІІІ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 28.10.2016 (Совместная конференция с Международным научным центром)

VII Международная научно-практическая конф. «Научный диспут: вопросы экономики и финансов», 30.09.2016 (Совместная конференция с Финансово-экономическим научным советом)

ХІІ Международная научно-практическая конференция: "Актуальные проблемы современной науки", 29.09.2016 (Совместная конференция с Международным научным центром)

XI Международная научно-практическая конференция «Актуальные проблемы современной науки», 30.08.2016 (Совместная конференция с Международным научным центром)

ІV Международная научно-практическая конф. "Экономика и управление в XXI веке: анализ тенденций и перспектив развития", 29.07.2016 (Совместная конференция с Финансово-экономическим научным советом)

X Международная научно-практическая конференция "Актуальные проблемы современной науки", 28.07.2016 (Совместная конференция с Международным научным центром)

VІ Международная научно-практическая конференция "Актуальные проблемы экономики и финансов", 30.06.2016 (Совместная конференция с Финансово-экономическим научным советом)

ІX Международная научно-практическая конференция "Актуальные проблемы современной науки", 29.06.2016 (Совместная конференция с Международным научным центром)

VI Международная научно-практическая конференция "Научный диспут: вопросы экономики и финансов", 31.05.2016 (Совместная конференция с Финансово-экономическим научным советом)

VIIІ Международная научно-практическая конференция "Актуальные проблемы современной науки", 30.05.2016 (Совместная конференция с Международным научным центром)

V Международная научно-практическая конференция "Глобальные проблемы экономики и финансов", 29.04.2016 (Совместная конференция с Финансово-экономическим научным советом)

VIІ Международная научно-практическая конференция "Актуальные проблемы современной науки", 28.04.2016 (Совместная конференция с Международным научным центром)

VІ Международная научно-практическая конференция "Актуальные проблемы современной науки", 31.03.2016 (Совместная конференция с Международным научным центром)

ІI Международная научно-практическая конф. "Экономика и управление в XXI веке: анализ тенденций и перспектив развития", 30.03.2016 (Совместная конференция с Финансово-экономическим научным советом)

V Международная научно-практическая конференция "Актуальные проблемы экономики и финансов", 21-24.03.2016 (Совместная конференция с Финансово-экономическим научным советом)

V Международная научно-практическая конференция "Научный диспут: вопросы экономики и финансов", 26.02.2016 (Совместная конференция с Финансово-экономическим научным советом)

II Международная научно-практическая конференция: "Научный диспут: актуальные вопросы медицины" 20.02.2016 (Совместная конференция с Международным научным центром)

ІV Международная научно-практическая конференция "Актуальные проблемы современной науки", 29.12.2015 (Совместная конференция с Международным научным центром)

IV Международная научно-практическая конференция "Глобальные проблемы экономики и финансов", 28.12.2015 (Совместная конференция с Финансово-экономическим научным советом)

IV Международная научно-практическая конференция "Актуальные проблемы экономики и финансов", 30.11.2015 (Совместная конференция с Финансово-экономическим научным советом)

IV Международная научно-практическая конференция "Научный диспут: вопросы экономики и финансов", 29.10.2015 (Совместная конференция с Финансово-экономическим научным советом)

Международная научно-практическая конференция: "Научный диспут: актуальные вопросы медицины" 28.10.2015 (Совместная конференция с Международным научным центром)

III Международная научно-практическая конференция "Глобальные проблемы экономики и финансов", 30.09.2015 (Совместная конференция с Финансово-экономическим научным советом)

III Международная научно-практическая конференция "Актуальные проблемы экономики и финансов", 31.08.2015 (Совместная конференция с Финансово-экономическим научным советом)

ІІІ Международная научно-практическая конференция "Научный диспут: вопросы экономики и финансов", 30.06.2015 (Совместная конференция с Финансово-экономическим научным советом)

ІІ Международная научно-практическая конференция "Актуальные проблемы современной науки", 29.06.2015 (Совместная конференция с Международным научным центром)

II Международная научно-практическая конференция "Глобальные проблемы экономики и финансов", 28.05.2015 (Совместная конференция с Финансово-экономическим научным советом)

Актуальные проблемы экономики и финансов, 29.04.2015 (Совместная конференция с Финансово-экономическим научным советом)

Научный диспут: вопросы экономики и финансов, 31.03.2015 (Совместная конференция с Финансово-экономическим научным советом)

Актуальные проблемы современной науки, 27.03.2015 (Совместная конференция с Международным научным центром)

Глобальные проблемы экономики и финансов, 27.02.2015 (Совместная конференция с финансово-экономическим научным советом)



Дмитрійчук А. І. CSS Grid Layout – наступний крок у CSS // Міжнародний науковий журнал "Інтернаука". — 2017. — №9.


Отрасль науки: Технические науки
Скачать статью (pdf)

Технічні науки

УДК 811.93

Дмитрійчук Антон Ігорович

студент

Національного технічного університету України

«Київський політехнічний інститут імені Ігоря Сікорського»

Дмитрийчук Антон Игоревич

студент

Национального технического университета Украины

«Киевский политехнический институт имени Игоря Сикорского»

Dmytriichuk A.

student

National Technical University of Ukraine

 «Igor Sikorsky Kyiv Polytechnic Institute»

CSS GRID LAYOUT – НАСТУПНИЙ КРОК У CSS

CSS GRID LAYOUTСЛЕДУЮЩИЙ ШАГ В CSS

CSS GRID LAYOUTTHE NEXT STEP IN CSS

Анотація: Виконано огляд модулю CSS Grid Layout для побудови інтерфейсів на основі двовимірної сітки.

Ключові слова: CSS3, CSS Grid Layout.

Аннотация: Выполнено обзор модуля CSS Grid Layout для построения интерфейсов на основе двумерной сетки.

Ключевые слова: CSS3, CSS Grid Layout.

Summary: Overview of CSS Grid Layout for building interfaces based on two-dimensional grid.

Key words: CSS3, CSS Grid Layout.

Grid Layout – двовимірна макетна модель на основі сітки для CSS, яка надає потужні можливості контролю розмірів і позиціювання блоків, та їх контенту. CSS завжди використовувався для компонування елементів веб-сторінки, але ніколи повністю не справлявся зі своєю задачею. Розробникам доводилось використовувати таблиці, плавучі блоки, позиціювання та вбудовані блоки, але всі ці методи по своїй суті хаки, і їм бракує важливої частини функціональності. З появою Flexbox процес розробки став значно легше, але ця технологія все ще призначена для розміщення блоків у лише одному напрямку. Grid Layout став першою технологією призначеною для вирішення проблеми побудови макету сторінки.

Розпочнемо з підтримки модуля Grid Layout браузерами. За даними веб-сервісу caniuse.com [2] на сьогодні (28.06.2017) модуль підтримується 69.3 відсотками пристроїв по всьому світу, і з кожним днем їх кількість зростає. Версії браузерів, які підтримують технологію вказано у табл. 1.

Таблиця 1

Підтримка браузерами CSS Grid Layout

Браузер

Версія

Повна підтримка

IE

11

-

Edge

15

-

Firefox

54

+

Chrome

59

+

Safari

10.1

+

Opera

46

+

iOS Safari

10.3

+

Android Browser

56

+

Chrome for Android

59

+

(складено автором на основі [2])

Перш ніж розпочинати роботу з Grid слід розуміти основні терміни.

Grid container – набір горизонтальних та вертикальних grid ліній, які перетинаються та розділяють простір grid контейнера на grid області, у які можуть бути поміщені grid елементи.

Grid lines – вертикальні та горизонтальні роздільники grid контейнера. Знаходять по обидві сторони від стовпчика або рядка. Нумерація починається з одиниці. Для кожної лінії можна задати унікальне ім’я або числовий індекс, для подальшого використання.

Grid track – простір між двома grid лініями, тобто стовпчик чи рядок.

Grid cell – найменший елемент Grid контейнера. Утворюється при перетині стовпчика та рядка.

Grid area – простір всередині Grid контейнера, який може охоплювати одну, або більше клітинок.

Розглянемо приклад побудови макету для наступної HTML розмітки:

<div class="container">

  <div class="b1">First</div>

  <div class="b2">Second</div>

  <div class="b3">Third</div>

  <div class="b4">Fourth</div>

  <div class="b5">Fifth</div>

  <div class="b6">Sixth</div>

</div>

Для контейнера задамо наступні стилі:

.container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 20px;

  grid-auto-rows: minmax(80px, auto);

}

Властивість display: grid задає новий контекст форматування grid для контейнера. grid-template-columns: repeat(3, 1fr) задає кількість стовпців та їх ширину. Для задання проміжків між стовпцями та рядками використовується властивість grid-gap. Для задання розмірів рядків, які утворюються автоматично слід задати властивість grid-auto-rows.

Тепер для кожного блоку окремо вкажемо стилі для задання розміру стовпця та рядка за допомогою властивостей grid-column, grid-row.

.b1 {

  grid-column: 1 / 3;

  grid-row: 2;

}

.b2 {

  grid-column: 2 / 4;

  grid-row: 1 / 3;

}

.b3 {

  grid-row: 3 / 5;

  grid-column: 1;

}

.b4 {

  grid-column: 3;

  grid-row: 4;

}

.b5 {

  grid-column: 2;

  grid-row: 4;

}

.b6 {

  grid-column: 3;

  grid-row: 3;

}

Результат можна побачити на рис. 1.

Рис. 1. Макет побудований на основі CSS Grid Layout

Більш детально ознайомитися з технологією можна за джерелом [1].

Література:

  1. Atkins T. J. CSS Grid Layout Module Level 1 [Електронний ресурс] / T. J. Atkins, E. J. Etemad, R. Atanassov // Editor’s Draft, 28 June 2017. – 2017. – Режим доступу до ресурсу: https://drafts.csswg.org/css-grid/
  2. Support tables for HTML5, CSS 2017 [Електронний ресурс]. –  Режим доступу до ресурсу  http://caniuse.com/#search=css%20grid