vedernickov.ru

свободное место

Своя тема Вордпресс на сетке (GRID)

Код сетки на Html:


<!doctype html>
<title>Example</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article aside"
"footer footer footer";
grid-template-rows: .1fr 1fr .1fr;
grid-template-columns: .4fr 1fr .4fr;
grid-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 20px;
background: steelblue;
color: white;
}
#header {
grid-area: header;
}
#footer {
grid-area: footer;
}
#article {
grid-area: article;
}
#nav {
grid-area: nav;
}
#aside {
grid-area: aside;
}
</style>
<body>
<header id="header">header</header>
<article id="article">article</article>
<nav id="Nav">Nav</nav>
<div id="adside">aside</div>
<footer id="footer">footer</footer>
</body>

Grid в переводе с английского — «сетка». 

Далее будем создавать файлы темы Вордпресс и вставлять в нашу заготовку куски кода из cms WordPress.

Читать продолжение здесь

Автор: admin

Метки: , , , , ,

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.