Граница вокруг нескольких элементов сетки без дополнительного контейнера? - PullRequest
Новая
       35

Граница вокруг нескольких элементов сетки без дополнительного контейнера?

0 голосов
/ 17 мая 2018

Я пытаюсь понять, как правильно делать подобные вещи в Grid. Поскольку я не уверен, правильно ли я это делаю.

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

Идея | Проблема

Прямой пример того, как все должно выглядеть после решения проблемы

Мне нужно сделать один столбец Сетка макет с элементами:

  • Заголовок
  • Main
  • Footer

Это должно быть в центре браузера.

Тогда должна быть одна граница вокруг всех этих трех элементов.

Кроме того, макет должен иметь возможность расширяться на высоту при добавлении большего количества элементов в элемент <main>.

Ограничения:

  1. Без создания дополнительного контейнера.
  2. Без использования рамок Свойства отдельных сторон
    • границы сверху
    • бордюр правый
    • граница дна
    • границы слева

Что я сделал и попробовал до сих пор:

  1. Настройка html, body {height: 100%;}
  2. Сделано <html> Элемент Сетка.
  3. Сделано <body> Элемент Сетка.
  4. Расположенный элемент Grid внутри Grid, , то есть один столбец с одной строкой
    • place-self: auto center; justify-self: center;
  5. Сделал рамку вокруг элемента <body>. 

	html, body {height: 100%;}
	
	html {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		
	}
	
	body {
		border: solid 5px black;
		width: 50%;
		
		display: grid;
		grid-template-rows: 50px auto 50px;
		grid-template-columns: 1fr;
		place-self: auto center;
		justify-self: center;
		
	}
	
	
	header { background-color: #0000b7;}
	main { background-color: blue;}
	footer { background-color:lightblue;}
	
	
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Home Page</title>
	<style>
  	
	
	</style>
</head>
<body>
	<header></header>
	<main>
	
	</main>
	<footer></footer>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Ваш place-self:center заставлял верхнюю часть тела подниматься немного выше HTML-документа.Использование place-self:auto center; должно исправить это.

html, body {height: 100%;}
	
	html {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		
	}
	
	body {
		border: solid 5px black;
		width: 50%;
		margin-top:5px;
		display: grid;
		grid-template-rows: 50px auto 50px;
		grid-template-columns: 1fr;
		place-self: auto center;
		justify-self: center;
		
	}
	
	
	header { background-color: #0000b7;}
	main { background-color: blue;}
	footer { background-color:lightblue;}
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Home Page</title>
	<style>
  	
	
	</style>
</head>
<body>
	<header></header>
	<main>
	
	</main>
	<footer></footer>
</body>
</html>
0 голосов
/ 18 мая 2018

Вот быстрый взлом, если вы не можете что-то найти: 

<header style="border:1fr 1fr 0 1fr"></header>
<main style="border:0 1fr 0 1fr"></main>
<footer style="border:0 1fr 1fr 1fr"></footer>

например. удалить нижнюю границу из header, верхнюю и нижнюю границу из main, а верхнюю границу из footer. И убедитесь, что между ними нет разницы. Это должно создать бесшовную границу.

...