I have a project where it requires dynamically changing the grid-column (Which I have achieved in the following link: https://codepen.io/DemogorGod/pen/oNMVvMV
I need to add a transition to the grid where once the button is clicked the two columns transition with ease...
I am hoping that there is a purly a CSS solution to this, however, if other solutions exist I am willing to implement them.
If it makes any difference I am using Vue.js...
with the help from this cool website, I found out that just animable are just grid-template-columns, not grid-columns. With that info, I just changed logic in your css code - toggling grid-template-columns in .grid-container. So you don't anymore need css code for items, you just update parent:
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a,
button {
color: #4fc08d;
}
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em;
width: 200px;
}
.grid_container {
width: 600px;
height: 200px;
display: grid;
grid-template-columns: 1fr 2fr;
margin: 10px 20px;
transition: all 0.3s
}
.reverse {
grid-template-columns: 2fr 1fr;
}
.grid_side_one {
border: #FBBD84 solid 1px;
}
.grid_side_two {
border: #0D5FFF solid 1px;
}
<html>
<div id="app">
<h5>
Hello World
</h5>
<p>
Dynamic grid with transitions
</p>
<button #click="toggle">
Toggle Cols
</button>
<div class="grid_container" :class="ToggleCols ? 'reverse' : ''">
<div class="grid_side_one">
Left Side
</div>
<div class="grid_side_two">
Rigth Side
</div>
</div>
<div>
Toggle: {{ ToggleCols }}
</div>
</div>
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app',
data() {
return {
ToggleCols: true
}
},
methods: {
toggle() {
this.ToggleCols = !this.ToggleCols
}
}
})
</script>
</html>
Related
Hi I display list of cards using map function and flex-wrap: wrap in css, it looks like this
list of cards
Is there any possible way to make first card 3x bigger than other so it looks like this list of cards, what css property can help me to solve this problem? Or should I change html and create an external component just for this card?
Here is an html for this block
<div className={styles.second_part}>
{
news.filter(cat => cat.category === "Category").slice(0,8).map((i)=>(
<div className={styles.normal_card}>
<div className={styles.normal_card_img}>
<Link href={'/news/'+i._id}>
<img src={i?.image} alt=""/>
</Link>
</div>
<div className={styles.normal_card_desc}>
<Link href={'/news/'+i._id}>
<h2>{i.title}</h2>
<span>{i.description?.length > 150 ? `${i.description?.substring(0, 150)}...` : i.description}</span>
</Link>
</div>
</div>
))
}
</div>
And css
.second_part{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.normal_card {
width: 24%;
justify-content: center;
margin-bottom: 25px;
border-bottom: 1px solid #EDEDED;
.normal_card_img {
img {
width: 100%;
object-fit: cover;
height: 300px;
}
}
.normal_card_desc {
text-align: justify;
display: flex;
flex-direction: column;
margin-bottom: 10px;
h2 {
font-size: 16px;
margin-bottom: 15px;
&:hover {
color: #ff4f00;
}
}
span {
margin-top: 15px;
}
}
hr {
}
}
}
You can use the css selector :first-of-type:
.card:first-of-type{
// styles here
}
I have a button inside a grid cell whose size is determined by font-size as em and padding as percentage.
I require the text of the button to not wrap.
Initially, I used <button type="button" id="log_out_button" data-action="manual_log_out">log out</button> but this produced an undesired result - it wrapped the text:
log
out
I added white-space: nowrap to the button to fix this but it made the button exceed its parent by 0.5cm, which decentralises my grid by the same amount.
To try fixing this knock-on problem, I changed the button to <input type="button" value="log out" id="log_out_button" data-action="manual_log_out">, to no avail.
I added box-sizing: border-box to the button, to no avail.
I experimented with grid-template-columns: auto auto auto; (third value), trying the various options listed Chrome's dev console, to no avail.
Prior to the navigation being a grid, it was a flexbox that had the same problem.
I want my site scalable so I can't set fixed values i.e. in pixels, and setting the percentage of the cell (grid-template-columns) still results in an offset/decentralisation.
How do I prevent my 'log out' button's text from wrapping and prevent it from exceeding its parent's width, such that I avoid the grid's decentralisation issue?
Problem code:
<html>
<head>
<style type="text/css">
body {
font-family: Arial;
background-color: white;
font-size: 1.5vh;
}
header {
height: 100%;
margin: auto;
height: 10.9%;
width: 100%;
}
nav {
margin: auto;
align-items: center;
justify-content: center;
height: 100%;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 2.5%;
}
nav a, nav a:visited {
text-decoration: none;
color: black;
}
#user_identity {
display: flex;
justify-content: center;
flex-flow: column;
align-items: flex-end;
}
#navigation_menu_wrapper {
height: 100%;
}
#navigation_menu {
flex: 1;
display: flex;
height: 100%;
align-items: center;
}
#navigation_menu div {
text-align: center;
padding-left: 15px;
padding-right: 15px;
font-size: 1.125em;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(205, 255, 205);
border-right: 1px solid rgb(157, 189, 157);
}
#navigation_menu a {
display: block;
padding: 7px 12px 7px 12px;
border-radius: 3px;
cursor: pointer;
}
#log_out_wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
}
#username_label {
font-family: "Optima Bold";
font-size: 1.87em;
color: rgb(72, 160, 72);
}
#permanent_id_label {
font-size: 1em;
color: rgb(146, 146, 146);
font-weight: bold;
margin-left: 9px;
cursor: default;
}
#mobile_menu_control {
display: none;
}
#log_out_button {
padding-top: 7%;
padding-bottom: 8%;
border: none;
border-radius: 3px;
background-color: #8dc49d;
text-align: center;
padding-left: 12%;
padding-right: 12%;
font-size: 1.25em;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<div id="user_identity">
<div id="username_label">texthere</div>
<div id="permanent_id_label">#texthere</div>
</div>
<div id="navigation_menu_wrapper">
<button id="mobile_menu_control">menu</button>
<div id="navigation_menu">
<div>
link1
</div>
<div>
link2
</div>
<div>
link3
</div>
<div>
link4
</div>
<div>
link5
</div>
<div>
link6
</div>
</div>
</div>
<div id="log_out_wrapper">
<input type="button" value="log out" id="log_out_button" data-action="manual_log_out">
</div>
</nav>
</header>
<div id="content_wrapper"></div>
</div>
</body>
</html>
As suggested by commenters, applied the following jQuery/JavaScript fix:
logOutButtonWidth = 0;
$(document).ready(function() {
centraliseHeader();
$(window).resize(function() {
centraliseHeader();
});
});
function centraliseHeader() {
logOutButtonWidth = $("#log_out_button").outerWidth();
$("nav").css({
gridTemplateColumns: "auto auto " + logOutButtonWidth + "px"
});
}
I need help for grid, green is grid and black is the grid gap. How I can align colon in gap?
I tried with flex and grid but nothing working out.
Result are like :
The colons are a visual clue rather than an integral part of the data.
This means they can be added using pseudo elements.
In this snippet each of the numbers is in a div which has an after pseudo element which is given the same width as the grid gap. It is positioned after the number's div so is placed exactly between two grid items.
Here is a basic example. Obviously you will want to alter the sizes and colors to suit your particular requirements.
.grid {
width: 600px;
max-width: 100vw;
height: 200px;
display: grid;
grid-template-columns: repeat(4, 1fr);
--gap: 30px;
gap: var(--gap);
grid-template-rows: 1fr;
background: black;
}
.grid>* {
color: white;
background: teal;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.grid>* *:first-child {
font-weight: bold;
font-size: 72px;
position: relative;
width: 100%;
text-align: center;
}
.grid>* *:first-child::after {
content: ':';
position: absolute;
left: 100%;
text-align: center;
width: var(--gap);
}
.grid>*:last-child *:first-child::after {
display: none;
}
<div class="grid">
<div>
<div>1</div>
<div>Days</div>
</div>
<div>
<div>2</div>
<div>Hours</div>
</div>
<div>
<div>36</div>
<div>Minutes</div>
</div>
<div>
<div>04</div>
<div>Seconds</div>
</div>
</div>
My website will have information on the temperature and I am hoping to have a read out of temperature followed by a degree sign and either 'C' or 'F'. There is other information on the page about the weather, so I am using CSS grid to layout the page and break all of the sections up. When I make the degree note font size smaller, the degree moves higher on the page. I would like it to be aligned with the temperature value, but I can't figure out whats going on in the page. Any assistance would be amazing.
Photograph of the problematic text:
.wrapper {
display: grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp {
display: grid;
grid-template-columns: 150px 150px;
padding: none;
font-size: 3em;
align-content: center;
justify-content: center;
}
.degree-note {
font-size: 30px;
align-content: center;
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'>
<div class='temp'>
<h2 class='temp-degree'>34</h2>
<h2 class='degree-note'>° C</h2>
</div>
</div>
Use CSS flex-box instead.
It's much more flexible and responsive than CSS grid.
Just run the code snippet you'll see.
.wrapper {
display: flex;
flex-direction: column;
padding-bottom: 2.5em;
}
.temp {
align-items: center;
display: flex;
font-size: 3em;
padding: none;
}
.temp-symbol {
align-self: flex-start;
font-size: 30px;
}
<div class="wrapper">
<img class='loading-text' alt="your image" src='img/weather-app-loading.png'>
<h2 class='temp'>
<span class='temp-number'>34</span>
<span class='temp-symbol'>° C</span>
</h2>
</div>
H2 tag will break line. Use instead span tag to add a specific class to text.
.wrapper {
display:grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp{
position: relative;
display:grid;
grid-template-columns: 150px 150px;
padding: none;
font-size: 3em;
align-content: center;
justify-content: center;
}
.degree-note {
position: absolute;
top: 1rem;
font-size: 30px;
align-content: center;
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'></img>
<div class='temp'>
<h2>
<span class='temp-degree'>34</span>
<span class='degree-note'>° C</span>
</h2>
</div>
</div>
Headings normally come with default margins. Remove those margins from your h2 elements. That should get you where you want to go.
Then, for more precision, set an equal line height for the content.
Add this to your code:
.temp {
line-height: 1; /* inherits to children */
}
.temp-degree {
margin: 0; /* remove default margin */
text-align: right; /* optional; eliminates gap between elements */
}
.degree-note {
margin: 0; /* remove default margin */
}
.wrapper {
display: grid;
grid-template-rows: 200px 100px;
padding-bottom: 2.5em;
}
.temp {
display: grid;
grid-template-columns: 150px 150px;
font-size: 3em;
align-content: center;
justify-content: center;
line-height: 1; /* inherits to children */
}
.temp-degree {
margin: 0; /* remove default margin */
text-align: right;
}
.degree-note {
font-size: 30px;
margin: 0; /* remove default margin */
}
<div class="wrapper">
<img class='loading-text' src='img/weather-app-loading.png'>
<div class='temp'>
<h2 class='temp-degree'>34</h2>
<h2 class='degree-note'>° C</h2>
</div>
</div>
I'm trying to use CSS grid to position div tags and input fields within them. The piece that keeps failing is the vertical-alignment. I have tried many suggestions made in the online forums but nothing works. It's important for me to align the input fields towards the bottom of a div tag. I would greatly appreciate any help.
I have tried vertical-align="bottom" within the immediate div in which input is included and also with the input tag itself.
I have tried using position="absolute" with bottom="0".
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: helvetica;
font-size: 36px;
color: white;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: [open-paren] 0.5fr [atomic-symbol]1.0fr;
width: 25%;
padding: 3px;
border: 3px solid teal;
border-radius: 5px;
}
.item {
background-color: teal;
border-radius: 5px;
border: 3px solid teal;
height: 100px;
vertical-align: bottom;
}
.item:nth-child(1) {
grid-row: 1/5;
grid-column: open-paren;
text-align: right;
}
.item:nth-child(2) {
grid-row: 4/9;
grid-column: atomic-symbol;
}
</style>
</head>
<body>
<section class="container">
<div class="item">
<p vertical-align="text-bottom">Open</p>
</div>
<div class="item">
<input type="text" vertical-align="bottom">
</div>
</section>
</body>
</html>
Any element included inside a div tag aligned closet to the bottom of it.
I do not know if I understood correctly but this is positioning the input down the div.
* {
padding: 0;
margin: 0;
}
body {
font-family: helvetica;
font-size: 36px;
color: white;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: 0.5fr 1fr;
width: 50%;
padding: 3px;
border: 3px solid teal;
border-radius: 5px;
}
.item {
display: grid;
align-items: end;
height: 100px;
border-radius: 5px;
border: 3px solid teal;
background-color: teal;
}
.item p {
text-align: right;
}
<section class="container">
<div class="item">
<p>Open</p>
</div>
<div class="item">
<input type="text">
</div>
</section>