Menu
I had a working code (in HTML/CSS grid) which consisted of a css-grid of 3 rows, 2 columns. The first row was navigation (spanning all columns), the middle was content (didn't span all columns) and the final was footer (spanning all the columns).
.body__div--background {
background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
color:#555555;
font-family: Verdana;
line-height:1.5;
font-size: 11px;
letter-spacing: 0.25px;
}
.css-grid-container{
height:100vh; /*???*/
display: grid;
grid-gap:20px;
grid-template-columns: 1fr 1fr; /* 2columns*/
grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row (content) is 15 times larger than the 3rd row (footer).*/
}
The css to put the elements at proper places in the grid is
.css-grid-item__nav{
grid-column: 1 / -1; //nav takes 1st row, all columns
grid-row: 1 / 2;
}
.css-grid-item__practice-div{
grid-column: 1 / 2; //middle has two divs. This should go in row2, column1
grid-row: 2 / 3;
align-self: center;
justify-self:end;
}
.css-grid-item__create-div{
grid-column: 2 / 3; //middle has two divs. This should go in row2, column2
grid-row: 2 / 3;
align-self: center;
justify-self:start;
}
.css-grid-item__footer{
grid-column: 1 / -1; //footer goes in row 3, all columns
grid-row: 3 / -1;
background-color: white;
color:black;
}
The HTML looked something like follows:
<body class="body__div--background" >
<div class="css-grid-container">
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item__nav">
...
</nav>
<div class="css-grid-container__practice-div">
...
</div>
<div class="css-grid-item__create-div">
...
</div>
<div class="css-grid-item__footer">
...
</div>
</div>
</body>
Later I decided to to use Angular. I created 3 Angular components, nav-component, content-component and footer-component. I copied the css and html to Angular's css/html files.
So, the nav-component's html file has the following content
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item__nav"> ... </nav>
and its css has the following content
.css-grid-item__nav{
grid-column: 1 / -1;
grid-row: 1 / 2;
}
The HTML of app component looks like the following:
<div class="body__div--background" >
<div class="css-grid-container">
<app-nav-component></app-nav-component>
<app-content-component></app-content-component>
<app-footer-component></app-footer-component>
</div>
</div>
However, the nav-component and footer-component occupies only 1 column instead of all the columns. The content-component's two divs are in column 2 instead of being in 1 column each of the grid.
How could I make my code work?
751
I prefer to use the :host pseudo-class selector in the component's css file. So for:
<app-nav-component></app-nav-component>
I'd use something like the following in nav.component.css or nav.component.scss:
:host {
grid-column: 1 / -1;
grid-row: 1 / 2;
}
This will do the same as what @nithalqb suggests, but it allows you to keep all of the css-styling specific to the component in one file. That makes it the preferred method for me, but use whichever method makes sense to you.
132
The code doesn't work in angular because
<app-nav-component></app-nav-component>
is the grid item tag now. Either you change the layout or put css to app-nav-component
app-nav-component {
grid-column: 1 / -1;
grid-row: 1 / 2;
}
it will work.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
