css grid
Posted in
979
3:22 am, May 12, 2022
display items in a css grid
So i removed bootstrap and now the items in my post header look like this:
and this:
this was using the row and col format in bootstrap
we can switch this to a css grid quite easily using the same class names
Display Grid
.row {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 100%;
grid-gap: 10px;
}
This is how the grid looks now, in dev tools. Nice and simple fix.
display items in a css grid Demo
View Demo Full Screen View Demo New Tab
display items in a css grid Code
HTML
<div class="row">
<div class="col">
<div class="category"> Posted in <i class="fas fa-list-alt" title="Posted in"></i> <span class="tags"><a href="/search/code/css+grid/" class="cat-link">css grid</a></span> </div>
</div>
<div class="col text-center">
<div class="views-header" title="2 views"><i class="fas fa-eye"></i> 2</div>
</div>
<div class="col text-end">
<div class="nice-date">3:22 am, May 12, 2022 </div>
</div>
</div>CSS
.row {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 100%;
grid-gap: 10px;
}xScripts
xJavascript
xRelated Tags
Add Comment
Other Items in css grid
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
CSS Tools
CSS Slider
Random Quote
