I am trying to draw vertical lines without borders.
I tried this code. But it draws horizontal lines in a box. Can someone please tell me how to do this.
.grid-container {
display: grid;
color: #fff;
opacity: .5;
}
.grid-item {
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em>property set to <em>grid</em>or
<em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
I'm not sure that will answer exactly what you are looking for, but if you put border-right, border-left you have "vertical" lines
.grid-container {
display: grid;
color: #fff;
opacity: .5;
}
.grid-item {
border-right: 1px solid rgba(0, 0, 0, 0.8);
border-left: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em>property set to <em>grid</em>or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Related
How can I use css to make sure the following code can display as 1, 2, or 4 columns but never as 3 columns?
.container {
display: flex;
flex-wrap: wrap;
border: 3px solid rgb(0, 0, 0);
}
.panel {
height: 100px;
width: 100px;
border: 3px solid rgb(255, 0, 0);
margin: 10px 0px 0px 10px;
}
<div class="container">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div>
So it's all about the width since you are using flex-box. if you want an item to take the entire row give the container width of 100% and if you want 2 items next to each other give it width:50% if you want 4 items then make sure to give it 25% of the width.
I made this responsive example I used the names bootstrap uses to make it easier to understand in case you are using bootstrap.
Note that you should work inside the div with class wrap.
.container {
display: flex;
flex-wrap: wrap;
outline: 3px solid rgb(0, 0, 0);
}
.panel {
height: 100px;
outline: 2px solid rgb(255, 0, 0);
background-color: green;
}
.wrap {
margin: 0 1rem;
height: 100%;
background-color: blueviolet;
color: white;
}
.col-12 {
width: 100%;
}
#media (min-width: 768px) {
.col-mid-6 {
width: 50%;
}
}
#media (min-width: 1200px) {
.col-xl-4 {
width: 25%;
}
}
<div class="container">
<div class="panel col-12 col-mid-6 col-xl-4">
<div class="wrap">div1</div>
</div>
<div class="panel col-12 col-mid-6 col-xl-4">
<div class="wrap">div2</div>
</div>
<div class="panel col-12 col-mid-6 col-xl-4">
<div class="wrap">div3</div>
</div>
<div class="panel col-12 col-mid-6 col-xl-4">
<div class="wrap">div4</div>
</div>
</div>
if that didn't help let me know.
I'm no good in css, I just want to remove only the edges inside the box, and leave only the outer edges.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Example: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
Here's a way you can accomplish that by removing the border on the grid items and using the outline property on the container:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
outline: 1px solid black;
outline-offset: -10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Is this what you are looking for?
To do this you only have to create a container box with border.
.grid-container {
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.container {
border: 1px solid rgba(0, 0, 0, 0.8);
grid-template-columns: auto auto auto;
display: grid;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
you could also change your Code like this:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 10px #2196F3;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
I have a fixed sidebar on the left and a right column with a couple of cards that are vertically aligned. How do I make the right column fall under the sidebar upon resize, so that the sidebar becomes a top bar with around 50% of the height of the viewport?
I want to maintain the ratio of the current spacing and for the content to remain vertically aligned. Also trying to make the sidebar no longer be fixed when it's resized.
Here's the fiddle: https://jsfiddle.net/snacks00/wLd67f1t/
body {
margin: 0;
}
.sidebar {
width: 40%;
height: 100vh;
text-align: center;
position: fixed;
background-color: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.right-column {
width: 60%;
display: inline-block;
height: 100%;
margin-left: 40%;
background-color: #F9F9F9;
}
.card {
display: flex;
border-radius: 4px;
padding: 10%;
margin: 10%;
background-color: #fff;
-moz-box-shadow: 0px 1px 5px #d3d3d3;
-webkit-box-shadow: 0px 1px 5px #d3d3d3;
}
#media (max-height: 45em) {
.sidebar {
height:500px;
display: inline-block;
position: fixed;
float: left;
}
}
<!DOCTYPE html>
<html lang="en">
<body>
<div class="sidebar">
<h2>Sidebar</h2>
</div>
<div class="right-column">
<div class="content" id="1">
<div class="card">
<p>Card number 1</p> </div>
</div>
<div class="content" id="2">
<div class="card">
<p>Card number 2</p> </div>
</div>
<div class="content" id="3">
<div class="card">
<p>Card number 3</p> </div>
</div>
<div class="content" id="4">
<div class="card">
<p>Card number 4</p> </div>
</div>
</div>
</body>
</html>
You should first consider setting the position of the sidebar to static in your media query. Otherwise, it will go over the cards.
For the cards to go below the sidebar in mobile mode, I would put everything in a flexbox container with the flex-wrap property set to wrap: it will allow the items to wrap if there's not enough space in a single line.
You could also use the bootstrap grid system. Hope that helps!
When you go full screen and have a width of the screen larger than 1340px, you will see my current issue. The div with the input is being moved down. Why is this? I am trying to get it to stay in position with the other two divs.
body {
background: #212121;
}
.wrapper {
padding: 20px;
max-width: 1270px;
margin: 150px auto;
}
#media (max-width: 1340px) {
.wrapper {
max-width: 400px;
}
}
.content {
height: 100%;
width: 400px;
margin: 10px;
min-width: 300px;
min-height: 500px;
display: inline-block;
background: #424242;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}
.insert {
display: flex;
}
<div class="wrapper">
<div class="content" id="row1">
<div class="wordInputContainer">
<div class="inputBox">
<input class="insert" type="text" placeholder="Enter Words"></input>
</div>
</div>
</div>
<div class="content" id="row2">
<div class="wordOutputContainer">
<div class="listBox">
<!-- List Elements Go Here -->
<!-- Words Output In Alphabetical Order [A - Z] -->
</div>
</div>
</div>
<div class="content" id="row3">
<div class="wordStatisticContainer">
<div class="wordCount"></div>
<div class="commonLetter"></div>
<div class="commonWord"></div>
<div class="longestWord"></div>
<div class="shortestWord"></div>
</div>
</div>
</div>
Because your divs are display: inline-block, they will use baseline alignment for their inline-level elements, such as text, images and inputs. The default setting is vertical-align: baseline.
So your input element is aligning to the baseline of the other divs.
Just add vertical-align: top to .content.
More here: Why is there a vertical scroll bar if parent and child have the same height?
In the following code, I'm trying to build table like design with flexbox display model.
.wrapper {
width: 500px;
height: 150px;
background: grey;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
display: flex;
flex-direction: row;
flex: 1;
border: 3px solid green;
}
.cell {
flex: 1;
border: 1px solid red;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row" style="overflow: auto;">
<div class="cell">1</div>
<div class="cell">
<div style="height: 200px;">huge content</div>
</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
</div>
</div>
My problem is, that in second row (with that "huge content") is scrollbar, and that scrollbar is taking space from my row cells and that's huge problem because my columns don't have the same width and it doesn't look like a table.
Things I can't use:
my own implementation of scrollbars (performance is an issue).
fixed widths of columns or .container (components height and width has to adapt).
Real world usage of component
So, I need to make the scrollbar in the second row to be above that content and not to take that space.
I found, that exists overflow: overlay , which works as I want.
It renders the scrollbar, but doesn't take that space
See: demo
I think you are looking for this..
JSFIDDLE
Code used -
::-webkit-scrollbar {
width: 10px;
height:10px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
border-radius: 6px;
background-color: grey;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
background-color: grey;
}