logo
down
shadow

Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?


Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?

By : user2954276
Date : November 22 2020, 01:01 AM
To fix this issue I want to create a grid of responsive 4x4 squares with a margin of exactly 20px on the left and right sides of the overall container. Furthermore, this would effectively eliminate the left margin on the first squares in each row and also eliminate the right margin on the last squares in each row since double margins aren't needed. , You can simply add
code :
section{
    margin:-1%;
    padding:20px;
}
html,
body {
  margin: 0;
}
.w {
  overflow: hidden;
}
section {
  margin: -1%;
  padding: 20px;
}
section div {
  background: #000;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
}
<div class="w">
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </section>
</div>


Share : facebook icon twitter icon
Looking for a jQuery solution to control container height in 20px increments rounding up to nearest 20px dimension

Looking for a jQuery solution to control container height in 20px increments rounding up to nearest 20px dimension


By : Homer's Kfzxa
Date : March 29 2020, 07:55 AM
it fixes the issue http://jsfiddle.net/loktar/b52qT/2/
Better demo by thirtyDot http://jsfiddle.net/d4Q3S/
code :
$(function(){
    var curHeight = parseInt($("#content_area").height()),
        newHeight = Math.ceil(curHeight/20) * 20;
    $("#content_area").height(newHeight );
});
Grid of responsive squares

Grid of responsive squares


By : Gene Liu
Date : March 29 2020, 07:55 AM
will be helpful for those in need You can make responsive grid of squares with verticaly and horizontaly centered content only with CSS. I will explain how in a step by step process but first here are 2 demos of what you can achieve :
Grid of square images Grid of squares with content
code :
 <div></div>
div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}
 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%
<div class="square">
    <div class="content">
        .. CONTENT HERE ..
    </div>
</div>
... and so on 9 times for 9 squares ...
.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
display:table;
/* and */
display:table-cell;
vertical-align:middle;
<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...
.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}
how to use a 16 column responsive grid with 20px gutter

how to use a 16 column responsive grid with 20px gutter


By : Dirk Zundel
Date : March 29 2020, 07:55 AM
I hope this helps you . Grids are farely simple.
The reason why you might be slightly confused is that people use fixed and fluid grids, fluid is usually set in percentages and fixed pixels.
code :
.container { 
    width:960px;
    margin: 0 auto;
} 
grid_1 { width: 96px; }
grid_2 { width: 192px; }
grid_3 { width: 288px; }
grid_4 {...}
<div class="logo grid_3"></div>
<div class="nav grid_7"></div>
Responsive grid of squares within a responsive grid of squares

Responsive grid of squares within a responsive grid of squares


By : mountain traveller
Date : March 29 2020, 07:55 AM
help you fix your problem I believe your imbrication is not right.
You need a flex container with 9 flex child holding also 9 boxes. floating boxes will do also since your dealing with square boxes DEMO
code :
* {
  box-sizing: border-box;
}
body,
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex,
.flex>div {
  border: solid 1px;
  width: 33.33%;
  text-align: center;
}
.flex > div:before {
  display: inline-block;
  padding-top: 100%;
  content: '';
  vertical-align: middle;
}
body {
  width:50%;
  min-width: 450px;
  margin:auto;
  font-size: calc(0.5vw + 10px); /* to hold here 3 letters, you can increase vw value for a single number */
}
/* resize here or let window do it */
div:nth-child(odd){
background:rgba(0,0,0,0.25)  
}
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
<div class="flex">
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
  <div>
    sudo
  </div>
</div>
How can I add 20px margin only to divs on the left hand side (flex)

How can I add 20px margin only to divs on the left hand side (flex)


By : AndroidMarshmallow
Date : March 29 2020, 07:55 AM
should help you out The divs are using flex & flex-wrap, and I only want to apply margin-right to the divs on the left hand side as when clicked the border is pushed up against the divs on the right hand side. Any ideas how to achieve this? , You can use
code :
div:nth-child(even){ 
margin-right: 20px;
}
Related Posts Related Posts :
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • Avoid outline of button when clicked
  • How to add a repeating png image in the background of a webpage using CSS?
  • Heading text displaying at the center instead of displaying in the statring line in asp.net application
  • Div fixation with his mother
  • Sentence is not taking /n
  • Wordpress mobile devices logo resize
  • Why a div with higher z-index is not visible (covered)?
  • HTML5 How to align a table to center inside a form?
  • Why is my clip-path not working when it's source is an svg?
  • Flex-box sticky footer with inner flex-box container with y axis scrolling
  • css3 jagged edge with transparent bg
  • Boostrap glyphicon is outside of text field
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org