CSS grid как замена Flex

08.03.2017

1 minute read

В стародавние времена Веб-разработки были популярны портянки текста. Потом кто-то придумал сделать сайдбар. И реализовал его на фреймах, либо на таблицах. Ныне от фреймов остался только </code>. А <code><table></code> используются только для таблиц (строка-столбец).</p> <p>В середине нулевых весь Веб начал переходить на блоки («дивы» <code><div></code>, даже ходил забавный термин «дивная верстка»). Они обтекали (float) друг друга и таким образом выстраивались в колонки. Данная метода постепенно отмирает.<br /> <span id="more-889"></span><br /> Начало 2010-х годов ознаменовал приход Flex. Он имеет свои заморочки и на данный момент еще не набрал популярность, но его уже можно смело использовать. Также Flex имеет свойство <a href="https://github.com/philipwalton/flexbugs">подглючивать в Safari</a>.</p> <p>Спецы предпочитают SASS-сетки вроде Susy, новички-версталы — Bootstrap, загаживающий семантику.<br /> И тут на сцену выходит CSS Grid, т.е. сетки на CSS. <a href="http://caniuse.com/#feat=css-grid">Поддержка браузерами</a> пока никакая (недавно вышедший Firefox 52 и следующий Google Chrome), но технология интересная. Смотрите сами.</p> <pre class="brush: xml; title: ; notranslate" title=""> <div class="wrapper"> <div class="box a">a</div> <div class="box b">b</div> <div class="box c">c</div> <div class="box d">d</div> <div class="box e">e</div> <div class="box f">f</div> <div class="box g">g</div> <div class="box h">h</div> <div class="box i">i</div> </div> </pre> <pre class="brush: css; title: ; notranslate" title=""> .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 50px 150px; grid-gap: 10px; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; text-transform: uppercase; border-radius: 5px; padding: 20px; font-size: 150%; } </pre> <p><iframe loading="lazy" class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="CSS Grid (now available)" src="about:blank" data-secret="unvlvteHVr" scrolling="no" frameborder="0" height="300" data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://codepen.io/zooks/embed/preview/OpWVdG?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=OpWVdG#?secret=unvlvteHVr">


Литература:
A Complete Guide to Grid



			CSS
Flex
grid
HTML
layout
web
история
			
						

							
												Итого
							0
							Поделились
										
				
			

										

							

																	
								
								
																	Поделиться
								
																	0
															

							
							
													
											

							

																	
								
								
																	Твитнуть
								
																	0
															

							
							
													
											

							

																	
								
								
																	Pin it
								
																	0
															

							
							
													
								
		
				
			




	
		1 comment
		
		
					
			
				Уведомление: Слава Firefox 57! – Заметки по Web 			
		

		

		
	
		Comments are closed.
	
	


	
		
	

	
					
				

				
					
						
					
					
						Previous Article					
				

				
					
						
						
							
								Старые интернет-каталоги
							

							
						
					
				
			
						
				

				
					
						
					
					
						Next Article					
				

				
					
													
								
																	
							
						
						
							
								Мысли о PostCSS



								
			Related Posts
			
				



	
						

											
													

						
															Далее
							
							2 minute read
						
					
					
					
					
				
			
		

			
			Настройка браузера Edge: ускорение и отключение слежки
							
					Ускоряем браузер Microsoft Edge: уменьшаем использование памяти, отключение слежки. На мой взгляд Edge — это лучший браузер по…				
			
			
		
	






	
						

											
													

						
															Далее
							
							1 minute read
						
					
					
					
					
				
			
		

			
			Как в Edge отключить кнопку Bing обнаружение
							
					С обновлением до Edge 111 многие заметили гигантскую синюю кнопку со значком поисковика Bing. Вот как её отключить:				
			
			
		
	






	
						

											
													

						
															Далее
							
							1 minute read
						
					
					
					
					
				
			
		

			
			Linux Mint: Как добавить ярлык веб-приложения на панель
							
					Иногда бывает довольно удобно запускать часто используемый сайт в отдельном окне прямо с панели задач. Чтобы закрепить веб-сайт…				
			
			
		
	






	
						

											
													

						
															Далее
							
							1 minute read
						
					
					
					
					
				
			
		

			
			Как отключить CSS в Chrome и Firefox
							
					Иногда бывает нужно временно отключить CSS в браузере для тестирования сайта. Ниже рабочий метод для удаления стилей в…