Diseño hexagonal receptivo en la cuadrícula de CSS-Hexi-Flexi Pure

Vista prévia

Descripción

Hexi-Flexi Grid es un componente SCSS utilizado para renderizar un diseño de hexágono adaptable, flexible y adaptable usando < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" target = "_ blank" rel = "noopener" > CSS Grid layout .

Funcionamiento

Importe el ' Hex-Style. SCSS ' en su proyecto.

@import './hex-style.scss';

El HTML para crear un diseño hexagonal básico.

<div id="myHexGrid">

<div class="hexCrop">


<div class="hexContainer">



<div class="hex"></div>



<div class="hex"></div>



<div class="hex"></div>



<div class="hex"></div>



<div class="hex"></div>



<div class="hex"></div>


</div>

</div>
</div>

Personalice el diseño de Hexagon en el ' _ Hex-Style. SCSS '.

$gridWidth:
 20em;


 // 'auto',(px,pt,r/em,vw/h)
$gridHeight:
auto;


 // 'auto',(px,pt,r/em,vw/h)
$columnCount: 3;




// 'auto',(number)
$rowCount:

2;




// 'auto',(number)
$hexCount:

auto;


 // 'auto',(number)
$hexLayout:
 row;



// 'row','column','strict'
$gridOrient:
vertical;
 // 'vertical','horizontal'
$crop:



none;


 // 'none','crop'
$cropFactor:
1;




// (number)
$hexContent:
auto;


 // 'auto','center'
$hexSize:

 auto;


 // 'auto',(px,pt,r/em,vw/h)
$hexMargin:
 0.5em;


// (px,pt,r/em,vw/h)
$hexShape:

hexagon;

// 'hexagon','circle'
$hexColor:

#48a999;

// hexcode,rgb/a,named
$images:


none;