CSS Grid предоставляет несколько методов для достижения вашего макета, включая размещение на основе строк , областей сетки и свойство order
. Ниже я приведу примеры первых двух.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-gap: .5em;
padding: .5em;
border: 1px solid black;
}
@media ( max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 50px 50px;
}
#b {
grid-row: 1;
}
}
/* non-essential decorative styles */
#a { background-color: lightgreen; }
#b { background-color: orange; }
#a, #b { display: flex; align-items: center; justify-content: center; font-size: 1.5em; }
A
B
grid-template-areas
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-gap: .5em;
padding: .5em;
border: 1px solid black;
grid-template-areas: " a b ";
}
#a { grid-area: a; }
#b { grid-area: b; }
@media ( max-width: 600px) {
.container {
grid-template-areas: " b " " a ";
grid-template-columns: 1fr;
grid-template-rows: 50px 50px;
}
}
/* non-essential decorative styles */
#a { background-color: lightgreen; }
#b { background-color: orange; }
#a, #b { display: flex; align-items: center; justify-content: center; font-size: 1.5em; }
A
B
[ 1127] [1112] Если Вы хотите сослаться на сам проект и НЕ DLL/блок (от вкладки Browse в Добавить Ссылочном диалоговом окне), то необходимо добавить проект, на который Вы хотите сослаться к Решению (Добавить... Существующий Проект). После того как это находится в Решении, Добавить Ссылочное диалоговое окно позволит Вам сослаться на один проект в решении из другого проекта в решении (через вкладку Projects в Добавить Ссылочном диалоговом окне).