As you can see in the picture, I can manage the second words to be exactly at the same distance from the start of the line by pressing the Tab key.
I want to have the same functionality in HTML. I know I can do this using <table> but I'm curious to know if there is any easier way like MS word or not.
<span>Firstword<span> <span>Second<span>
<br>
<span>Second<span> <span>Third<span>
You can use a flex css to achieve the desired result. Also, add a margin-right according to your need.
<style>
.row {
display: flex;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
margin-right: 1em;
}
</style>
<div class="row">
<div class="col">
<span>Firstword</span> <span>Second</span>
</div>
<br>
<div class="col">
<span>Third</span> <span>Fourth</span>
</div>
</div>
You can specify the width of the spans, so the others will be in the same position:
.tab{
display: inline-block;
width: 150px;
}
<span class="tab">Firstword</span><span>Second</span>
<br>
<span class="tab">Second</span><span>Third</span>
Take a look at this solution using grid
It is very complex, but gives you (like Word) total control over spacing on the page or element.
I divided the grid in columns of 10 pixels and rows of 20 pixels.
body {
display: grid;
grid-template-columns: repeat(auto-fill, 10px);
grid-template-rows: repeat(auto-fill, 20px);
}
span:nth-child(odd) {
grid-column: 1
}
span:nth-child(even) {
grid-column: 12
}
<span>Firstword</span><span>Second</span>
<span>Second</span><span>Third</span>
Related
I am using chart.js and I have two pie charts and a bar chart which I would like to display in a single row. I want the bar chart to be larger than the individual pie charts, so I did the following.
To get the two pie charts to fit into a single column I used column-count.
Here is the CSS which I am using
.container {
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-bottom: 30px;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
align-self: stretch;
margin-right: 10px;
margin-left: 10px;
}
.container div {
flex: 1;
}
canvas {
max-width: 100%;
display: flex;
}
.pie {
column-count: 2;
max-height: 93%;
}
And the HTML
<div class="container">
<div class="row">
<div class="pie">
<canvas baseChart [data]="pieFeeChartData" [type]="pieChartType"
[options]="pieFeeChartOptions">
</canvas>
<canvas baseChart [data]="pieFooChartData" [type]="pieChartType"
[options]="pieFooChartOptions">
</canvas>
</div>
<div class="column">
<canvas baseChart [data]="barBlahChartData"
[options]="barBlahChartOptions" [type]="barChartType">
</canvas>
</div>
</div>
</div>
My best solution is to set max-height in .pie to 93%. It does give me close to what I want, but it is not exact and the formatting is inconsistent with smaller window sizes. It is not bad, but I am hoping to find a more precise solution without using a hard coded value. I have tried a lot of different flex settings, but I want to keep these CSS settings consistent throughout the project as much as possible, so that is not ideal either.
Here is a screenshot of what is happening when I DONT set max-height: 93%;
You could greatly simplify this using grid. It will give you more predictable results and it will be more reusable in your project and it will be a lot easier to reason about as your project grows.
Also, notice how the canvas height value uses !important to override the fixed values of the height of your chart that are applied as inline styles by Chart.js.
.container {
width: 90%;
margin: auto;
}
.row {
display: grid;
/*
A standard 12 column grid can be evenly
divided into quarters and thirds.
*/
grid-template-columns: repeat(12, 1fr);
}
.col-full {
grid-column: span 12;
}
.col-half {
grid-column: span 6;
}
.col-quarter {
grid-column: span 3;
}
/* ✨ Magic ✨ */
canvas {
max-width: 100%;
height: 100% !important;
}
And now the HTML:
<div class="container">
<div class="row">
<div class="col-quarter">
<canvas id="pieChart1"></canvas>
</div>
<div class="col-quarter">
<canvas id="pieChart2"></canvas>
</div>
<div class="col-half">
<canvas id="barChart"></canvas>
</div>
</div>
</div>
The result:
I am trying to understand how CSS grids work. I've tried to make an example of a store item as practice, but I am at a loss.
Here's my how my CSS currently looks. Cut off at the top, weird spacing, and the right side is not coming together at all.
How's how it would ideally look
Here is my current CSS, I hope someone can help explain where I am misunderstanding the use of
CSS grids.
.store-currency {
height: 3vh;
}
.item {
display: flex;
align-items: center;
grid-row: 1 / span 2;
}
.currency {
display: flex;
align-items: center;
}
#num-bought-item0 {
display: flex;
align-items: center;
justify-content: right;
margin-right: 10px;
grid-column: 1 / span 2;
}
.store-item {
height: 15vh;
width: 100%;
display: grid;
grid-template-columns: 2fr;
grid-template-rows: 1fr 1fr;
font-size: 24px;
color: white;
border: 5px white solid;
justify-content: left;
align-items: center;
}
.store-item img {
margin: 10px;
height: 8vh;
}
.store-container {
display: flex;
height: 100%;
width: 30vw;
z-index: 0;
background-color: saddlebrown;
left: 0;
position: absolute;
text-align: center;
}
HTML:
<div class="store-container">
<div class="store-item" id="item0">
<div class ="item">
<img src="dumbell.png" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item0">
<span>Owned</span>
<span id="count-item0">0</span>
</div>
<div class="currency">
<img class="store-currency" src="coin.png" alt="">
<span>100000</span>
</div>
</div>
you did the first steps.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
.store-container {
display: grid | inline-grid;
}
grid – generates a block-level grid
inline-grid – generates an inline-level grid
With grid-template-columns you can define how many columns will appear in your layout.
P.S Fr unit is a fractional unit and 1fr is for 1 part of the available space. In this example each column would take ~ 25% from the available space.
.container {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
For your task, you can use grid-template-areas feature.
The grid-template-areas CSS property specifies named grid areas,
establishing the cells in the grid and assigning them names.
For example:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
This will generates something like that in modern browsers:
If you need more examples, take a look here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
https://css-tricks.com/snippets/css/complete-guide-grid/
Some of the examples are taken from the second site.
It looks like you are mixing flex and grid properties. grid-row and grid-column are only avalaible for a grid display (2D), not a flex display (1D).
You can try to play around with flex (worse choice since it is drawing a 1D layout) , you can use grid , which is made for this kind of layout.
Here a couple example with flex and grid
/* GRID make it simple*/
.grid {display:grid;}
#num-bought-item2 {grid-row:1/3;grid-column:2;}
#num-bought-item2 {display:grid;margin:auto;text-align:center}
/* layout done */
/* some reset for the demo*/
*{box-sizing:border-box;}
.store-container {display:grid;justify-content:center;}
.store-item {border:solid;}
.store-item>div {padding:0.5em;}
img{vertical-align:middle;}
[src="https://dummyimage.com/25/ff0"]{border-radius:50%}
big{color:darkgreen;background:lightyellow;}
/* FLEX make it a mess */
.flex {display:flex}
.column {flex-flow:column wrap;height:120px;}/* here an height is to be set so it wraps*/
/* since it is not made for this, we need to mess around */
.flex #num-bought-item1{order:2}/* reorder item */
.flex .item {height:0;min-height:60%;}/* hide it, then show it */
.flex .currency {height:0;min-height:40%;}/* hide it, then show it */
.flex #num-bought-item1{display:flex;flex-direction:column;justify-content:center;text-align:center;margin:auto;}
/* and flex did not do it */
<p>Let's try via flex</p>
<div class="store-container">
<div class="store-item flex column" id="item1">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item1" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
<p>And via <big>grid</big> </p>
<div class="store-container">
<div class="store-item grid" id="item2">
<div class="item">
<img src="https://dummyimage.com/50" alt="">
<span>Dumbbell</span>
</div>
<div id="num-bought-item2" >
<span>Owned</span>
<span id="count-item1">0</span>
</div>
<div class="currency">
<img class="store-currency" src="https://dummyimage.com/25/ff0" alt="">
<span>100000</span>
</div>
</div>
</div>
I am using grid to display 4 columns, but for some reason I can't use justify-content: space-between on them.
Example code:
<div class"wrapper">
<div class"columns">
<div class"column1"></div>
<div class"column2"></div>
<div class"column3"></div>
<div class"column4"></div>
</div>
</div>
.wrapper {
max-width: 1200px;
width: 90%;
margin: 0 auto;
}
.columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: space-between;
}
What am I achieving right now:
RIGHT NOW
What I want to achieve:
ACHIEVMENT
! Pay attention: 1) Displaying items as flex and justify space between is not a solution for me, because I want to use grid.
2) Giving columns grid-gap is also not a solution for me.
Thanks for your help in advance!
I'm using the grid layout in CSS and my aim is to have an image, text, an input field and a button next to each other, spanning over two rows as illustrated here:
I've given the image the grid-column property of 1 / 1 so that it is only in the first column, and all the other elements have 2 / 2 so that they are in the second column.
The problem I'm facing is that the second column is overlapping the first column, as seen in this snippet:
.profile {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 20px;
}
img {
border-radius: 50%;
height: 100%;
margin-right: 2%;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.profile>*:not(img) {
grid-column: 2 / 3;
}
.sameline {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="profile">
<img src="https://image.ibb.co/nr3C7T/pic.png">
<div class="sameline">
<h2>Title</h2>
<button>Click</button>
</div>
<form method="post">
<input type="text">
</form>
</div>
All you had to do was increase grid-column-gap. This makes them non overlapping. Change the styling to suit your needs.
.profile {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 100px;
}
img {
border-radius: 50%;
height: 100%;
margin-right: 2%;
grid-column: 1 / 1;
grid-row: 1 / 2;
}
.profile>*:not(img) {
grid-column: 2 / 2;
}
.sameline {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="profile">
<img src="https://image.ibb.co/nr3C7T/pic.png">
<div class="sameline">
<h2>Title</h2>
<button>Click</button>
</div>
<form method="post">
<input type="text" style="width:100%;">
</form>
</div>
Hope this helps.
I'm not sure if I understand your problem correctly, but I think what you mean is that the second column in the second row is overlapping.
The grid-row property is not correctly used in this case. This property works with grid lines. So the first value is used to specify from which grid line the item starts, and the second one specifies the grid line where it should end. So in your case, you say that it should start from grid line 1 (so essentially the top border of the grid) and that it should end at grid line 2 (which is the grid line between the two columns).
What you actually want is for the image to start at grid line 1 and end at grid line 3, so that it covers both of rows. The same rule applies to the grid-column property.
.profile {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 100px;
}
img {
border-radius: 50%;
height: 100%;
margin-right: 2%;
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.profile>*:not(img) {
grid-column: 2 / 3;
}
.sameline {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="profile">
<img src="https://image.ibb.co/nr3C7T/pic.png">
<div class="sameline">
<h2>Title</h2>
<button>Click</button>
</div>
<form method="post">
<input type="text">
</form>
</div>
On small screens i'm trying to get my .image div to slot in between .title and .text divs, something like:
title
image
text
.title and .text are wrapped in a container, this is so on a different screen size (medium up) I can do:
title | image
text | continuation of image element
I've thought about using a flex column layout for small screens, and changing the order of elements, but order doesn't seem to have an effect on a nested child element.
Here's the code for small:
HTML:
<div class="container">
<div class="content">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="image"></div>
</div>
CSS:
.container {
display: flex;
flex-direction: column;
}
.image {
order: 2;
}
.title {
order: 1;
}
.text {
order: 3;
}
For reference my code for medium is (cascading upwards from small):
.container {
flex-direction: row;
}
.content {
flex-basis: 50%;
}
.image {
flex-basis: 50%;
}
You can ordering only sibling elements. Title and text aren't sibling with image. You need wrap title, text and image in general parent block
I have similar case, but for solution CSS grid is used, however there is also another support is recommended: CSS subgrid
For a simple design like even columns or rows it is not that hard to replicate, but if parent container contain more complex grid sizes, then CSS subgrid will be requirement for an only CSS solution.
Here is full demo: https://codepen.io/XCanG/pen/vYaNZPo?editors=1100
HTML I have in the demo have very similar structure with having parent, some container for 2 nested elements and 3rd element.
This is quote from my demo, except I rename class names according to your example:
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.container .content {
display: grid;
grid-column: 1;
grid-row: 1 / span 3;
grid-template-rows: repeat(3, 1fr); /* Fallback */
grid-template-rows: subgrid; /* Limited support: https://caniuse.com/css-subgrid */
grid-template-columns: subgrid;
}
.container .title {
grid-colimn: 1;
grid-row: 1;
}
.container .text {
grid-column: 1;
grid-row: 3;
}
.container .image {
grid-column: 1;
grid-row: 2;
}
CSS make that nested element follow grid columns and rows, with subgrid support you will have exactly defined part of the grid (otherwise you will need to define fallback). And with grid-column and grid-row it is possible to sort elements.
Grid-template-areas will come in pretty handy in this type of layout as they are not siblings. And grid-template-areas have full browser support.
.container {
display: grid;
grid-template-areas: "title img"
"txt img";
}
.title{grid-area: title;}
.text{grid-area: txt;}
.image{grid-area: img;}
#media(max-width: 800px){
.container{
grid-template-areas: 'title'
'img'
'txt';
}
}
<div class="container">
<div class="content">
<div class="title">title</div>
<div class="text">text</div>
</div>
<div class="image">img</div>
</div>